Advertisement
Guest User

Untitled

a guest
Dec 20th, 2014
146
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.23 KB | None | 0 0
  1. .element-animation{
  2. animation: animationFrames ease-in 0.2s;
  3. animation-iteration-count: 1;
  4. transform-origin: 50% 50%;
  5. animation-fill-mode:forwards; /*when the spec is finished*/
  6. -webkit-animation: animationFrames ease-in 0.2s;
  7. -webkit-animation-iteration-count: 1;
  8. -webkit-transform-origin: 50% 50%;
  9. -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  10. -moz-animation: animationFrames ease-in 0.2s;
  11. -moz-animation-iteration-count: 1;
  12. -moz-transform-origin: 50% 50%;
  13. -moz-animation-fill-mode:forwards; /*FF 5+*/
  14. -o-animation: animationFrames ease-in 0.2s;
  15. -o-animation-iteration-count: 1;
  16. -o-transform-origin: 50% 50%;
  17. -o-animation-fill-mode:forwards; /*Not implemented yet*/
  18. -ms-animation: animationFrames ease-in 0.2s;
  19. -ms-animation-iteration-count: 1;
  20. -ms-transform-origin: 50% 50%;
  21. -ms-animation-fill-mode:forwards; /*IE 10+*/
  22. }
  23.  
  24. @keyframes animationFrames{
  25. 0% {
  26. opacity:0;
  27. transform: scaleX(1.00) scaleY(1.00) ;
  28. }
  29. 50% {
  30. opacity:1;
  31. transform: scaleX(1.20) scaleY(1.20) ;
  32. }
  33. 100% {
  34. opacity:1;
  35. transform: scaleX(1.00) scaleY(1.00) ;
  36. }
  37. }
  38.  
  39. @-moz-keyframes animationFrames{
  40. 0% {
  41. opacity:0;
  42. -moz-transform: scaleX(1.00) scaleY(1.00) ;
  43. }
  44. 50% {
  45. opacity:1;
  46. -moz-transform: scaleX(1.20) scaleY(1.20) ;
  47. }
  48. 100% {
  49. opacity:1;
  50. -moz-transform: scaleX(1.00) scaleY(1.00) ;
  51. }
  52. }
  53.  
  54. @-webkit-keyframes animationFrames {
  55. 0% {
  56. opacity:0;
  57. -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  58. }
  59. 50% {
  60. opacity:1;
  61. -webkit-transform: scaleX(1.20) scaleY(1.20) ;
  62. }
  63. 100% {
  64. opacity:1;
  65. -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  66. }
  67. }
  68.  
  69. @-o-keyframes animationFrames {
  70. 0% {
  71. opacity:0;
  72. -o-transform: scaleX(1.00) scaleY(1.00) ;
  73. }
  74. 50% {
  75. opacity:1;
  76. -o-transform: scaleX(1.20) scaleY(1.20) ;
  77. }
  78. 100% {
  79. opacity:1;
  80. -o-transform: scaleX(1.00) scaleY(1.00) ;
  81. }
  82. }
  83.  
  84. @-ms-keyframes animationFrames {
  85. 0% {
  86. opacity:0;
  87. -ms-transform: scaleX(1.00) scaleY(1.00) ;
  88. }
  89. 50% {
  90. opacity:1;
  91. -ms-transform: scaleX(1.20) scaleY(1.20) ;
  92. }
  93. 100% {
  94. opacity:1;
  95. -ms-transform: scaleX(1.00) scaleY(1.00) ;
  96. }
  97. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement