Advertisement
Guest User

Animations CSS

a guest
Dec 11th, 2019
207
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.15 KB | None | 0 0
  1. /*!
  2. Animate.css - http://daneden.me/animate
  3. Licensed under the MIT license - http://opensource.org/licenses/MIT
  4.  
  5. Copyright (c) 2014 Daniel Eden
  6. */
  7.  
  8. @import url(animate.css);
  9.  
  10. /* Theme Name: The Project - Responsive Website Template
  11. Author:HtmlCoder
  12. Author URI:http://www.htmlcoder.me
  13. Author e-mail:htmlcoder.me@gmail.com
  14. Version:1.0.0
  15. Created:December 2014
  16. License URI:http://support.wrapbootstrap.com/
  17. File Description: Animations */
  18.  
  19. /*Custom Animations*/
  20.  
  21. @-webkit-keyframes fadeInDownSmall {
  22. 0% {
  23. opacity: 0;
  24. -webkit-transform: translate3d(0, -20px, 0);
  25. transform: translate3d(0, -20px, 0);
  26. }
  27.  
  28. 100% {
  29. opacity: 1;
  30. -webkit-transform: translate3d(0, 0, 0);
  31. transform: translate3d(0, 0, 0);
  32. }
  33. }
  34.  
  35. @keyframes fadeInDownSmall {
  36. 0% {
  37. opacity: 0;
  38. -webkit-transform: translate3d(0, -20px, 0);
  39. -ms-transform: translate3d(0, -20px, 0);
  40. transform: translate3d(0, -20px, 0);
  41. }
  42.  
  43. 100% {
  44. opacity: 1;
  45. -webkit-transform: translate3d(0, 0, 0);
  46. -ms-transform: translate3d(0, 0, 0);
  47. transform: translate3d(0, 0, 0);
  48. }
  49. }
  50.  
  51. .fadeInDownSmall {
  52. -webkit-animation-name: fadeInDownSmall;
  53. animation-name: fadeInDownSmall;
  54. }
  55.  
  56. @-webkit-keyframes fadeInLeftSmall {
  57. 0% {
  58. opacity: 0;
  59. -webkit-transform: translate3d(-20px, 0, 0);
  60. transform: translate3d(-20px, 0, 0);
  61. }
  62.  
  63. 100% {
  64. opacity: 1;
  65. -webkit-transform: none;
  66. transform: none;
  67. }
  68. }
  69.  
  70. @keyframes fadeInLeftSmall {
  71. 0% {
  72. opacity: 0;
  73. -webkit-transform: translate3d(-20px, 0, 0);
  74. -ms-transform: translate3d(-20px, 0, 0);
  75. transform: translate3d(-20px, 0, 0);
  76. }
  77.  
  78. 100% {
  79. opacity: 1;
  80. -webkit-transform: none;
  81. -ms-transform: none;
  82. transform: none;
  83. }
  84. }
  85.  
  86. .fadeInLeftSmall {
  87. -webkit-animation-name: fadeInLeftSmall;
  88. animation-name: fadeInLeftSmall;
  89. }
  90.  
  91. @-webkit-keyframes fadeInRightSmall {
  92. 0% {
  93. opacity: 0;
  94. -webkit-transform: translate3d(20px, 0, 0);
  95. transform: translate3d(20px, 0, 0);
  96. }
  97.  
  98. 100% {
  99. opacity: 1;
  100. -webkit-transform: none;
  101. transform: none;
  102. }
  103. }
  104.  
  105. @keyframes fadeInRightSmall {
  106. 0% {
  107. opacity: 0;
  108. -webkit-transform: translate3d(20px, 0, 0);
  109. -ms-transform: translate3d(20px, 0, 0);
  110. transform: translate3d(20px, 0, 0);
  111. }
  112.  
  113. 100% {
  114. opacity: 1;
  115. -webkit-transform: none;
  116. -ms-transform: none;
  117. transform: none;
  118. }
  119. }
  120.  
  121. .fadeInRightSmall {
  122. -webkit-animation-name: fadeInRightSmall;
  123. animation-name: fadeInRightSmall;
  124. }
  125.  
  126. @-webkit-keyframes fadeInUpSmall {
  127. 0% {
  128. opacity: 0;
  129. -webkit-transform: translate3d(0, 20px, 0);
  130. transform: translate3d(0, 20px, 0);
  131. }
  132.  
  133. 100% {
  134. opacity: 1;
  135. -webkit-transform: none;
  136. transform: none;
  137. }
  138. }
  139.  
  140. @keyframes fadeInUpSmall {
  141. 0% {
  142. opacity: 0;
  143. -webkit-transform: translate3d(0, 20px, 0);
  144. -ms-transform: translate3d(0, 20px, 0);
  145. transform: translate3d(0, 20px, 0);
  146. }
  147.  
  148. 100% {
  149. opacity: 1;
  150. -webkit-transform: none;
  151. -ms-transform: none;
  152. transform: none;
  153. }
  154. }
  155.  
  156. .fadeInUpSmall {
  157. -webkit-animation-name: fadeInUpSmall;
  158. animation-name: fadeInUpSmall;
  159. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement