css3_animations.less 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. /* CSS Animations */
  2. .wpb_animate_when_almost_visible {
  3. .opacity(0);
  4. }
  5. .wpb_animate_when_almost_visible:not(.wpb_start_animation) {
  6. .animation(none)
  7. }
  8. .wpb_top-to-bottom, .top-to-bottom {
  9. .animation(wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  10. }
  11. .wpb_bottom-to-top, .bottom-to-top {
  12. .animation(wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  13. }
  14. .wpb_left-to-right, .left-to-right {
  15. .animation(wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  16. }
  17. .wpb_right-to-left, .right-to-left {
  18. .animation(wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  19. }
  20. .wpb_appear, .appear {
  21. .animation(wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  22. .scale(1);
  23. }
  24. .wpb_start_animation {
  25. .opacity(1);
  26. }
  27. /* Top to bottom keyframes */
  28. @-webkit-keyframes wpb_ttb {
  29. 0% {
  30. -webkit-transform: translate(0, -10%);
  31. .opacity(0);
  32. }
  33. 100% {
  34. -webkit-transform: translate(0, 0);
  35. .opacity(1);
  36. }
  37. }
  38. @-moz-keyframes wpb_ttb {
  39. 0% {
  40. -moz-transform: translate(0, -10%);
  41. .opacity(0);
  42. }
  43. 100% {
  44. -moz-transform: translate(0, 0);
  45. .opacity(1);
  46. }
  47. }
  48. @-o-keyframes wpb_ttb {
  49. 0% {
  50. -o-transform: translate(0, -10%);
  51. .opacity(0);
  52. }
  53. 100% {
  54. -o-transform: translate(0, 0);
  55. .opacity(1);
  56. }
  57. }
  58. @keyframes wpb_ttb {
  59. 0% {
  60. .translate(0, -10%);
  61. .opacity(0);
  62. }
  63. 100% {
  64. .translate(0, 0);
  65. .opacity(1);
  66. }
  67. }
  68. /* Bottom to top keyframes */
  69. @-webkit-keyframes wpb_btt {
  70. 0% {
  71. -webkit-transform: translate(0, 10%);
  72. .opacity(0);
  73. }
  74. 100% {
  75. -webkit-transform: translate(0, 0);
  76. .opacity(1);
  77. }
  78. }
  79. @-moz-keyframes wpb_btt {
  80. 0% {
  81. -moz-transform: translate(0, 10%);
  82. .opacity(0);
  83. }
  84. 100% {
  85. -moz-transform: translate(0, 0);
  86. .opacity(1);
  87. }
  88. }
  89. @-o-keyframes wpb_btt {
  90. 0% {
  91. -o-transform: translate(0, 10%);
  92. .opacity(0);
  93. }
  94. 100% {
  95. -o-transform: translate(0, 0);
  96. .opacity(1);
  97. }
  98. }
  99. @keyframes wpb_btt {
  100. 0% {
  101. .translate(0, 10%);
  102. .opacity(0);
  103. }
  104. 100% {
  105. .translate(0, 0);
  106. .opacity(1);
  107. }
  108. }
  109. /* Left to right keyframes */
  110. @-webkit-keyframes wpb_ltr {
  111. 0% {
  112. -webkit-transform: translate(-10%, 0);
  113. .opacity(0);
  114. }
  115. 100% {
  116. -webkit-transform: translate(0, 0);
  117. .opacity(1);
  118. }
  119. }
  120. @-moz-keyframes wpb_ltr {
  121. 0% {
  122. -moz-transform: translate(-10%, 0);
  123. .opacity(0);
  124. }
  125. 100% {
  126. -moz-transform: translate(0, 0);
  127. .opacity(1);
  128. }
  129. }
  130. @-o-keyframes wpb_ltr {
  131. 0% {
  132. -o-transform: translate(-10%, 0);
  133. .opacity(0);
  134. }
  135. 100% {
  136. -o-transform: translate(0, 0);
  137. .opacity(1);
  138. }
  139. }
  140. @keyframes wpb_ltr {
  141. 0% {
  142. .translate(-10%, 0);
  143. .opacity(0);
  144. }
  145. 100% {
  146. .translate(0, 0);
  147. .opacity(1);
  148. }
  149. }
  150. /* Right to left keyframes */
  151. @-webkit-keyframes wpb_rtl {
  152. 0% {
  153. -webkit-transform: translate(10%, 0);
  154. .opacity(0);
  155. }
  156. 100% {
  157. -webkit-transform: translate(0, 0);
  158. .opacity(1);
  159. }
  160. }
  161. @-moz-keyframes wpb_rtl {
  162. 0% {
  163. -moz-transform: translate(10%, 0);
  164. .opacity(0);
  165. }
  166. 100% {
  167. -moz-transform: translate(0, 0);
  168. .opacity(1);
  169. }
  170. }
  171. @-o-keyframes wpb_rtl {
  172. 0% {
  173. -o-transform: translate(10%, 0);
  174. .opacity(0);
  175. }
  176. 100% {
  177. -o-transform: translate(0, 0);
  178. .opacity(1);
  179. }
  180. }
  181. @keyframes wpb_rtl {
  182. 0% {
  183. .translate(10%, 0);
  184. .opacity(0);
  185. }
  186. 100% {
  187. .translate(0, 0);
  188. .opacity(1);
  189. }
  190. }
  191. /* Appear from center keyframes */
  192. @-webkit-keyframes wpb_appear {
  193. 0% {
  194. -webkit-transform: scale(0.5);
  195. .opacity(0.1);
  196. }
  197. 100% {
  198. -webkit-transform: scale(1);
  199. .opacity(1);
  200. }
  201. }
  202. @-moz-keyframes wpb_appear {
  203. 0% {
  204. -moz-transform: scale(0.5);
  205. .opacity(0.1);
  206. }
  207. 100% {
  208. -moz-transform: scale(1);
  209. .opacity(1);
  210. }
  211. }
  212. @-o-keyframes wpb_appear {
  213. 0% {
  214. -o-transform: scale(0.5);
  215. .opacity(0.1);
  216. }
  217. 100% {
  218. -o-transform: scale(1);
  219. .opacity(1);
  220. }
  221. }
  222. @keyframes wpb_appear {
  223. 0% {
  224. .scale(0.5);
  225. .opacity(0.1);
  226. }
  227. 100% {
  228. .scale(1);
  229. .opacity(1);
  230. }
  231. }
  232. .vc-spinner {
  233. &::before {
  234. content: '';
  235. width: 16px;
  236. height: 16px;
  237. display: inline-block;
  238. pointer-events: none;
  239. margin-top: 6px;
  240. background: url('../images/spinner.gif') no-repeat;
  241. background-position-x: center;
  242. background-position-y: center;
  243. }
  244. &.vc-spinner-complete {
  245. &::before {
  246. background-image: url('../vc/tick.png');
  247. }
  248. }
  249. &.vc-spinner-failed {
  250. &::before {
  251. background-image: url('../vc/remove.png');
  252. }
  253. }
  254. }