1. /* animation */
  2. .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;}
  3. .a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;}
  4. .a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;}
  5. /* 淡入 */
  6. .a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
  7. /* 淡入-从上 */
  8. .a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}
  9. /* 淡入-从右 */
  10. .a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}
  11. /* 淡入-从下 */
  12. .a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}
  13. /* 淡入-从左 */
  14. .a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}
  15. /* 淡出 */
  16. .a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}
  17. /* 淡出-向上 */
  18. .a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;}
  19. /* 淡出-向右 */
  20. .a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;}
  21. /* 淡出-向下 */
  22. .a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}
  23. /* 淡出-向左 */
  24. .a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}
  25. /* 弹跳 */
  26. .a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}
  27. /* 弹入 */
  28. .a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}
  29. /* 弹入-从上 */
  30. .a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}
  31. /* 弹入-从右 */
  32. .a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}
  33. /* 弹入-从下 */
  34. .a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}
  35. /* 弹入-从左 */
  36. .a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}
  37. /* 弹出 */
  38. .a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}
  39. /* 弹出-向上 */
  40. .a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}
  41. /* 弹出-向右 */
  42. .a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}
  43. /* 弹出-向下 */
  44. .a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}
  45. /* 弹出-向左 */
  46. .a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;}
  47. /* 转入 */
  48. .a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}
  49. /* 转入-从左上 */
  50. .a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}
  51. /* 转入-从左下 */
  52. .a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}
  53. /* 转入-从右上 */
  54. .a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}
  55. /* 转入-从右下*/
  56. .a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}
  57. /* 转出 */
  58. .a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}
  59. /* 转出-向左上 */
  60. .a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;}
  61. /* 转出-向左下 */
  62. .a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;}
  63. /* 转出-向右上 */
  64. .a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;}
  65. /* 转出-向右下 */
  66. .a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;}
  67. /* 翻转 */
  68. .a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}
  69. /* 翻入-X轴 */
  70. .a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}
  71. /* 翻入-Y轴 */
  72. .a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}
  73. /* 翻出-X轴 */
  74. .a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}
  75. /* 翻出-Y轴 */
  76. .a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}
  77. /* 闪烁 */
  78. .a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}
  79. /* 震颤 */
  80. .a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}
  81. /* 摇摆 */
  82. .a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}
  83. /* 摇晃 */
  84. .a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}
  85. /* 震铃 */
  86. .a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}
  87. /* define */
  88. /* 淡入 */
  89. @-webkit-keyframes fadein{
  90.     0%{opacity:0;}
  91.     100%{opacity:1;}
  92. }
  93. @-moz-keyframes fadein{
  94.     0%{opacity:0;}
  95.     100%{opacity:1;}
  96. }
  97. @-ms-keyframes fadein{
  98.     0%{opacity:0;}
  99.     100%{opacity:1;}
  100. }
  101. @keyframes fadein{
  102.     0%{opacity:0;}
  103.     100%{opacity:1;}
  104. }
  105. /* 淡入-从上 */
  106. @-webkit-keyframes fadeinT{
  107.     0%{opacity:0;-webkit-transform:translateY(-100px);}
  108.     100%{opacity:1;-webkit-transform:translateY(0);}
  109. }
  110. @-moz-keyframes fadeinT{
  111.     0%{opacity:0;-moz-transform:translateY(-100px);}
  112.     100%{opacity:1;-moz-transform:translateY(0);}
  113. }
  114. @-ms-keyframes fadeinT{
  115.     0%{opacity:0;-ms-transform:translateY(-100px);}
  116.     100%{opacity:1;-ms-transform:translateY(0);}
  117. }
  118. @keyframes fadeinT{
  119.     0%{opacity:0;transform:translateY(-100px);}
  120.     100%{opacity:1;transform:translateY(0);}
  121. }
  122. /* 淡入-从右 */
  123. @-webkit-keyframes fadeinR{
  124.     0%{opacity:0;-webkit-transform:translateX(100px);}
  125.     100%{opacity:1;-webkit-transform:translateX(0);}
  126. }
  127. @-moz-keyframes fadeinR{
  128.     0%{opacity:0;-moz-transform:translateX(100px);}
  129.     100%{opacity:1;-moz-transform:translateX(0);}
  130. }
  131. @-ms-keyframes fadeinR{
  132.     0%{opacity:0;-ms-transform:translateX(100px);}
  133.     100%{opacity:1;-ms-transform:translateX(0);}
  134. }
  135. @keyframes fadeinR{
  136.     0%{opacity:0;transform:translateX(100px);}
  137.     100%{opacity:1;transform:translateX(0);}
  138. }
  139. /* 淡入-从下 */
  140. @-webkit-keyframes fadeinB{
  141.     0%{opacity:0;-webkit-transform:translateY(100px);}
  142.     100%{opacity:1;-webkit-transform:translateY(0);}
  143. }
  144. @-moz-keyframes fadeinB{
  145.     0%{opacity:0;-moz-transform:translateY(100px);}
  146.     100%{opacity:1;-moz-transform:translateY(0);}
  147. }
  148. @-ms-keyframes fadeinB{
  149.     0%{opacity:0;-ms-transform:translateY(100px);}
  150.     100%{opacity:1;-ms-transform:translateY(0);}
  151. }
  152. @keyframes fadeinB{
  153.     0%{opacity:0;transform:translateY(100px);}
  154.     100%{opacity:1;transform:translateY(0);}
  155. }
  156. /* 淡入-从左 */
  157. @-webkit-keyframes fadeinL{
  158.     0%{opacity:0;-webkit-transform:translateX(-100px);}
  159.     100%{opacity:1;-webkit-transform:translateX(0);}
  160. }
  161. @-moz-keyframes fadeinL{
  162.     0%{opacity:0;-moz-transform:translateX(-100px);}
  163.     100%{opacity:1;-moz-transform:translateX(0);}
  164. }
  165. @-ms-keyframes fadeinL{
  166.     0%{opacity:0;-ms-transform:translateX(-100px);}
  167.     100%{opacity:1;-ms-transform:translateX(0);}
  168. }
  169. @keyframes fadeinL{
  170.     0%{opacity:0;transform:translateX(-100px);}
  171.     100%{opacity:1;transform:translateX(0);}
  172. }
  173. /* 淡出 */
  174. @-webkit-keyframes fadeout{
  175.     0%{opacity:1;}
  176.     100%{opacity:0;}
  177. }
  178. @-moz-keyframes fadeout{
  179.     0%{opacity:1;}
  180.     100%{opacity:0;}
  181. }
  182. @-ms-keyframes fadeout{
  183.     0%{opacity:1;}
  184.     100%{opacity:0;}
  185. }
  186. @keyframes fadeout{
  187.     0%{opacity:1;}
  188.     100%{opacity:0;}
  189. }
  190. /* 淡出-向上 */
  191. @-webkit-keyframes fadeoutT{
  192.     0%{opacity:1;-webkit-transform:translateY(0);}
  193.     100%{opacity:0;-webkit-transform:translateY(-100px);}
  194. }
  195. @-moz-keyframes fadeoutT{
  196.     0%{opacity:1;-moz-transform:translateY(0);}
  197.     100%{opacity:0;-moz-transform:translateY(-100px);}
  198. }
  199. @-ms-keyframes fadeoutT{
  200.     0%{opacity:1;-ms-transform:translateY(0);}
  201.     100%{opacity:0;-ms-transform:translateY(-100px);}
  202. }
  203. @keyframes fadeoutT{
  204.     0%{opacity:1;transform:translateY(0);}
  205.     100%{opacity:0;transform:translateY(-100px);}
  206. }
  207. /* 淡出-向右 */
  208. @-webkit-keyframes fadeoutR{
  209.     0%{opacity:1;-webkit-transform:translateX(0);}
  210.     100%{opacity:0;-webkit-transform:translateX(100px);}
  211. }
  212. @-moz-keyframes fadeoutR{
  213.     0%{opacity:1;-moz-transform:translateX(0);}
  214.     100%{opacity:0;-moz-transform:translateX(100px);}
  215. }
  216. @-ms-keyframes fadeoutR{
  217.     0%{opacity:1;-ms-transform:translateX(0);}
  218.     100%{opacity:0;-ms-transform:translateX(100px);}
  219. }
  220. @keyframes fadeoutR{
  221.     0%{opacity:1;transform:translateX(0);}
  222.     100%{opacity:0;transform:translateX(100px);}
  223. }
  224. /* 淡出-向下 */
  225. @-webkit-keyframes fadeoutB{
  226.     0%{opacity:1;-webkit-transform:translateY(0);}
  227.     100%{opacity:0;-webkit-transform:translateY(100px);}
  228. }
  229. @-moz-keyframes fadeoutB{
  230.     0%{opacity:1;-moz-transform:translateY(0);}
  231.     100%{opacity:0;-moz-transform:translateY(100px);}
  232. }
  233. @-ms-keyframes fadeoutB{
  234.     0%{opacity:1;-ms-transform:translateY(0);}
  235.     100%{opacity:0;-ms-transform:translateY(100px);}
  236. }
  237. @keyframes fadeoutB{
  238.     0%{opacity:1;transform:translateY(0);}
  239.     100%{opacity:0;transform:translateY(100px);}
  240. }
  241. /* 淡出-向左 */
  242. @-webkit-keyframes fadeoutL{
  243.     0%{opacity:1;-webkit-transform:translateX(0);}
  244.     100%{opacity:0;-webkit-transform:translateX(-100px);}
  245. }
  246. @-moz-keyframes fadeoutL{
  247.     0%{opacity:1;-moz-transform:translateX(0);}
  248.     100%{opacity:0;-moz-transform:translateX(-100px);}
  249. }
  250. @-ms-keyframes fadeoutL{
  251.     0%{opacity:1;-ms-transform:translateX(0);}
  252.     100%{opacity:0;-ms-transform:translateX(-100px);}
  253. }
  254. @keyframes fadeoutL{
  255.     0%{opacity:1;transform:translateX(0);}
  256.     100%{opacity:0;transform:translateX(-100px);}
  257. }
  258. /* 弹跳 */
  259. @-webkit-keyframes bounce{
  260.     0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
  261.     40%{-webkit-transform:translateY(-30px);}
  262.     60%{-webkit-transform:translateY(-15px);}
  263. }
  264. @-moz-keyframes bounce{
  265.     0%,20%,50%,80%,100%{-moz-transform:translateY(0);}
  266.     40%{-moz-transform:translateY(-30px);}
  267.     60%{-moz-transform:translateY(-15px);}
  268. }
  269. @-ms-keyframes bounce{
  270.     0%,20%,50%,80%,100%{-ms-transform:translateY(0);}
  271.     40%{-ms-transform:translateY(-30px);}
  272.     60%{-ms-transform:translateY(-15px);}
  273. }
  274. @keyframes bounce{
  275.     0%,20%,50%,80%,100%{transform:translateY(0);}
  276.     40%{transform:translateY(-30px);}
  277.     60%{transform:translateY(-15px);}
  278. }
  279. /* 弹入 */
  280. @-webkit-keyframes bouncein{
  281.     0%{opacity:0;-webkit-transform:scale(0.3);}
  282.     50%{opacity:1;-webkit-transform:scale(1.05);}
  283.     70%{-webkit-transform:scale(0.9);}
  284.     100%{-webkit-transform:scale(1);}
  285. }
  286. @-moz-keyframes bouncein{
  287.     0%{opacity:0;-moz-transform:scale(0.3);}
  288.     50%{opacity:1;-moz-transform:scale(1.05);}
  289.     70%{-moz-transform:scale(0.9);}
  290.     100%{-moz-transform:scale(1);}
  291. }
  292. @-ms-keyframes bouncein{
  293.     0%{opacity:0;-ms-transform:scale(0.3);}
  294.     50%{opacity:1;-ms-transform:scale(1.05);}
  295.     70%{-ms-transform:scale(0.9);}
  296.     100%{-ms-transform:scale(1);}
  297. }
  298. @keyframes bouncein{
  299.     0%{opacity:0;transform:scale(0.3);}
  300.     50%{opacity:1;transform:scale(1.05);}
  301.     70%{transform:scale(0.9);}
  302.     100%{transform:scale(1);}
  303. }
  304. /* 弹入-从上 */
  305. @-webkit-keyframes bounceinT{
  306.     0%{opacity:0;-webkit-transform:translateY(-100px);}
  307.     60%{opacity:1;-webkit-transform:translateY(30px);}
  308.     80%{-webkit-transform:translateY(-10px);}
  309.     100%{-webkit-transform:translateY(0);}
  310. }
  311. @-moz-keyframes bounceinT{
  312.     0%{opacity:0;-moz-transform:translateY(-100px);}
  313.     60%{opacity:1;-moz-transform:translateY(30px);}
  314.     80%{-moz-transform:translateY(-10px);}
  315.     100%{-moz-transform:translateY(0);}
  316. }
  317. @-ms-keyframes bounceinT{
  318.     0%{opacity:0;-ms-transform:translateY(-100px);}
  319.     60%{opacity:1;-ms-transform:translateY(30px);}
  320.     80%{-ms-transform:translateY(-10px);}
  321.     100%{-ms-transform:translateY(0);}
  322. }
  323. @keyframes bounceinT{
  324.     0%{opacity:0;transform:translateY(-100px);}
  325.     60%{opacity:1;transform:translateY(30px);}
  326.     80%{transform:translateY(-10px);}
  327.     100%{transform:translateY(0);}
  328. }
  329. /* 弹入-从右 */
  330. @-webkit-keyframes bounceinR{
  331.     0%{opacity:0;-webkit-transform:translateX(100px);}
  332.     60%{opacity:1;-webkit-transform:translateX(-30px);}
  333.     80%{-webkit-transform:translateX(10px);}
  334.     100%{-webkit-transform:translateX(0);}
  335. }
  336. @-moz-keyframes bounceinR{
  337.     0%{opacity:0;-moz-transform:translateX(100px);}
  338.     60%{opacity:1;-moz-transform:translateX(-30px);}
  339.     80%{-moz-transform:translateX(10px);}
  340.     100%{-moz-transform:translateX(0);}
  341. }
  342. @-ms-keyframes bounceinR{
  343.     0%{opacity:0;-ms-transform:translateX(100px);}
  344.     60%{opacity:1;-ms-transform:translateX(-30px);}
  345.     80%{-ms-transform:translateX(10px);}
  346.     100%{-ms-transform:translateX(0);}
  347. }
  348. @keyframes bounceinR{
  349.     0%{opacity:0;transform:translateX(100px);}
  350.     60%{opacity:1;transform:translateX(-30px);}
  351.     80%{transform:translateX(10px);}
  352.     100%{transform:translateX(0);}
  353. }
  354. /* 弹入-从下 */
  355. @-webkit-keyframes bounceinB{
  356.     0%{opacity:0;-webkit-transform:translateY(100px);}
  357.     60%{opacity:1;-webkit-transform:translateY(-30px);}
  358.     80%{-webkit-transform:translateY(10px);}
  359.     100%{-webkit-transform:translateY(0);}
  360. }
  361. @-moz-keyframes bounceinB{
  362.     0%{opacity:0;-moz-transform:translateY(100px);}
  363.     60%{opacity:1;-moz-transform:translateY(-30px);}
  364.     80%{-moz-transform:translateY(10px);}
  365.     100%{-moz-transform:translateY(0);}
  366. }
  367. @-ms-keyframes bounceinB{
  368.     0%{opacity:0;-ms-transform:translateY(100px);}
  369.     60%{opacity:1;-ms-transform:translateY(-30px);}
  370.     80%{-ms-transform:translateY(10px);}
  371.     100%{-ms-transform:translateY(0);}
  372. }
  373. @keyframes bounceinB{
  374.     0%{opacity:0;transform:translateY(100px);}
  375.     60%{opacity:1;transform:translateY(-30px);}
  376.     80%{transform:translateY(10px);}
  377.     100%{transform:translateY(0);}
  378. }
  379. /* 弹入-从左 */
  380. @-webkit-keyframes bounceinL{
  381.     0%{opacity:0;-webkit-transform:translateX(-100px);}
  382.     60%{opacity:1;-webkit-transform:translateX(30px);}
  383.     80%{-webkit-transform:translateX(-10px);}
  384.     100%{-webkit-transform:translateX(0);}
  385. }
  386. @-moz-keyframes bounceinL{
  387.     0%{opacity:0;-moz-transform:translateX(-100px);}
  388.     60%{opacity:1;-moz-transform:translateX(30px);}
  389.     80%{-moz-transform:translateX(-10px);}
  390.     100%{-moz-transform:translateX(0);}
  391. }
  392. @-ms-keyframes bounceinL{
  393.     0%{opacity:0;-ms-transform:translateX(-100px);}
  394.     60%{opacity:1;-ms-transform:translateX(30px);}
  395.     80%{-ms-transform:translateX(-10px);}
  396.     100%{-ms-transform:translateX(0);}
  397. }
  398. @keyframes bounceinL{
  399.     0%{opacity:0;transform:translateX(-100px);}
  400.     60%{opacity:1;transform:translateX(30px);}
  401.     80%{transform:translateX(-10px);}
  402.     100%{transform:translateX(0);}
  403. }
  404. /* 弹出 */
  405. @-webkit-keyframes bounceout{
  406.     0%{-webkit-transform:scale(1);}
  407.     25%{-webkit-transform:scale(0.95);}
  408.     50%{opacity:1;-webkit-transform:scale(1.1);}
  409.     100%{opacity:0;-webkit-transform:scale(0.3);}
  410. }
  411. @-moz-keyframes bounceout{
  412.     0%{-moz-transform:scale(1);}
  413.     25%{-moz-transform:scale(0.95);}
  414.     50%{opacity:1;-moz-transform:scale(1.1);}
  415.     100%{opacity:0;-moz-transform:scale(0.3);}
  416. }
  417. @-ms-keyframes bounceout{
  418.     0%{-ms-transform:scale(1);}
  419.     25%{-ms-transform:scale(0.95);}
  420.     50%{opacity:1;-ms-transform:scale(1.1);}
  421.     100%{opacity:0;-ms-transform:scale(0.3);}
  422. }
  423. @keyframes bounceout{
  424.     0%{transform:scale(1);}
  425.     25%{transform:scale(0.95);}
  426.     50%{opacity:1;transform:scale(1.1);}
  427.     100%{opacity:0;transform:scale(0.3);}
  428. }
  429. /* 弹出-向上*/
  430. @-webkit-keyframes bounceoutT{
  431.     0%{-webkit-transform:translateY(0);}
  432.     20%{opacity:1;-webkit-transform:translateY(20px);}
  433.     100%{opacity:0;-webkit-transform:translateY(-100px);}
  434. }
  435. @-moz-keyframes bounceoutT{
  436.     0%{-moz-transform:translateY(0);}
  437.     20%{opacity:1;-moz-transform:translateY(20px);}
  438.     100%{opacity:0;-moz-transform:translateY(-100px);}
  439. }
  440. @-ms-keyframes bounceoutT{
  441.     0%{-ms-transform:translateY(0);}
  442.     20%{opacity:1;-ms-transform:translateY(20px);}
  443.     100%{opacity:0;-ms-transform:translateY(-100px);}
  444. }
  445. @keyframes bounceoutT{
  446.     0%{transform:translateY(0);}
  447.     20%{opacity:1;transform:translateY(20px);}
  448.     100%{opacity:0;transform:translateY(-100px);}
  449. }
  450. /* 弹出-向右*/
  451. @-webkit-keyframes bounceoutR{
  452.     0%{-webkit-transform:translateX(0);}
  453.     20%{opacity:1;-webkit-transform:translateX(-20px);}
  454.     100%{opacity:0;-webkit-transform:translateX(100px);}
  455. }
  456. @-moz-keyframes bounceoutR{
  457.     0%{-moz-transform:translateX(0);}
  458.     20%{opacity:1;-moz-transform:translateX(-20px);}
  459.     100%{opacity:0;-moz-transform:translateX(100px);}
  460. }
  461. @-ms-keyframes bounceoutR{
  462.     0%{-ms-transform:translateX(0);}
  463.     20%{opacity:1;-ms-transform:translateX(-20px);}
  464.     100%{opacity:0;-ms-transform:translateX(100px);}
  465. }
  466. @keyframes bounceoutR{
  467.     0%{transform:translateX(0);}
  468.     20%{opacity:1;transform:translateX(-20px);}
  469.     100%{opacity:0;transform:translateX(100px);}
  470. }
  471. /* 弹出-向下 */
  472. @-webkit-keyframes bounceoutB{
  473.     0%{-webkit-transform:translateY(0);}
  474.     20%{opacity:1;-webkit-transform:translateY(-20px);}
  475.     100%{opacity:0;-webkit-transform:translateY(100px);}
  476. }
  477. @-moz-keyframes bounceoutB{
  478.     0%{-moz-transform:translateY(0);}
  479.     20%{opacity:1;-moz-transform:translateY(-20px);}
  480.     100%{opacity:0;-moz-transform:translateY(100px);}
  481. }
  482. @-ms-keyframes bounceoutB{
  483.     0%{-ms-transform:translateY(0);}
  484.     20%{opacity:1;-ms-transform:translateY(-20px);}
  485.     100%{opacity:0;-ms-transform:translateY(100px);}
  486. }
  487. @keyframes bounceoutB{
  488.     0%{transform:translateY(0);}
  489.     20%{opacity:1;transform:translateY(-20px);}
  490.     100%{opacity:0;transform:translateY(100px);}
  491. }
  492. /* 弹出-向左 */
  493. @-webkit-keyframes bounceoutL{
  494.     0%{-webkit-transform:translateX(0);}
  495.     20%{opacity:1;-webkit-transform:translateX(20px);}
  496.     100%{opacity:0;-webkit-transform:translateX(-100px);}
  497. }
  498. @-moz-keyframes bounceoutL{
  499.     0%{-moz-transform:translateX(0);}
  500.     20%{opacity:1;-moz-transform:translateX(20px);}
  501.     100%{opacity:0;-moz-transform:translateX(-100px);}
  502. }
  503. @-ms-keyframes bounceoutL{
  504.     0%{-ms-transform:translateX(0);}
  505.     20%{opacity:1;-ms-transform:translateX(20px);}
  506.     100%{opacity:0;-ms-transform:translateX(-100px);}
  507. }
  508. @keyframes bounceoutL{
  509.     0%{transform:translateX(0);}
  510.     20%{opacity:1;transform:translateX(20px);}
  511.     100%{opacity:0;transform:translateX(-200px);}
  512. }
  513. /* 转入 */
  514. @-webkit-keyframes rotatein{
  515.     0%{opacity:0;-webkit-transform:rotate(-200deg);}
  516.     100%{opacity:1;-webkit-transform:rotate(0);}
  517. }
  518. @-moz-keyframes rotatein{
  519.     0%{opacity:0;-moz-transform:rotate(-200deg);}
  520.     100%{opacity:1;-moz-transform:rotate(0);}
  521. }
  522. @-ms-keyframes rotatein{
  523.     0%{opacity:0;-ms-transform:rotate(-200deg);}
  524.     100%{opacity:1;-ms-transform:rotate(0);}
  525. }
  526. @keyframes rotatein{
  527.     0%{opacity:0;transform:rotate(-200deg);}
  528.     100%{opacity:1;transform:rotate(0);}
  529. }
  530. /* 转入-从左上 */
  531. @-webkit-keyframes rotateinLT{
  532.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
  533.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
  534. }
  535. @-moz-keyframes rotateinLT{
  536.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
  537.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
  538. }
  539. @-ms-keyframes rotateinLT{
  540.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
  541.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
  542. }
  543. @keyframes rotateinLT{
  544.     0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
  545.     100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  546. }
  547. /* 转入-从左下 */
  548. @-webkit-keyframes rotateineftB{
  549.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
  550.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
  551. }
  552. @-moz-keyframes rotateineftB{
  553.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
  554.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
  555. }
  556. @-ms-keyframes rotateineftB{
  557.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
  558.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
  559. }
  560. @keyframes rotateineftB{
  561.     0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
  562.     100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  563. }
  564. /* 转入-从右上 */
  565. @-webkit-keyframes rotateinRT{
  566.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
  567.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
  568. }
  569. @-moz-keyframes rotateinRT{
  570.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
  571.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
  572. }
  573. @-ms-keyframes rotateinRT{
  574.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
  575.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
  576. }
  577. @keyframes rotateinRT{
  578.     0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
  579.     100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  580. }
  581. /* 转入-从右下*/
  582. @-webkit-keyframes rotateinRB{
  583.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
  584.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
  585. }
  586. @-moz-keyframes rotateinRB{
  587.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
  588.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
  589. }
  590. @-ms-keyframes rotateinRB{
  591.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
  592.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
  593. }
  594. @keyframes rotateinRB{
  595.     0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
  596.     100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  597. }
  598. /* 转出 */
  599. @-webkit-keyframes rotateout{
  600.     0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
  601.     100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
  602. }
  603. @-moz-keyframes rotateout{
  604.     0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;}
  605.     100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;}
  606. }
  607. @-ms-keyframes rotateout{
  608.     0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;}
  609.     100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;}
  610. }
  611. @keyframes rotateout{
  612.     0%{transform-origin:center center;transform:rotate(0);opacity:1;}
  613.     100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
  614. }
  615. /* 转出-向左上 */
  616. @-webkit-keyframes rotateoutLT{
  617.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
  618.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
  619. }
  620. @-moz-keyframes rotateoutLT{
  621.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
  622.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;}
  623. }
  624. @-ms-keyframes rotateoutLT{
  625.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
  626.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;}
  627. }
  628. @keyframes rotateoutLT{
  629.     0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  630.     100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
  631. }
  632. /* 转出-向左下 */
  633. @-webkit-keyframes rotateoutLB{
  634.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
  635.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
  636. }
  637. @-moz-keyframes rotateoutLB{
  638.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;}
  639.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;}
  640. }
  641. @-ms-keyframes rotateoutLB{
  642.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;}
  643.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;}
  644. }
  645. @keyframes rotateoutLB{
  646.     0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
  647.     100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
  648. }
  649. /* 转出-向右上 */
  650. @-webkit-keyframes rotateoutRT{
  651.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
  652.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
  653. }
  654. @-moz-keyframes rotateoutRT{
  655.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
  656.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;}
  657. }
  658. @-ms-keyframes rotateoutRT{
  659.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
  660.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;}
  661. }
  662. @keyframes rotateoutRT{
  663.     0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  664.     100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
  665. }
  666. /* 转出-向右下 */
  667. @-webkit-keyframes rotateoutBR{
  668.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
  669.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
  670. }
  671. @-moz-keyframes rotateoutBR{
  672.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;}
  673.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;}
  674. }
  675. @-ms-keyframes rotateoutBR{
  676.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;}
  677.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;}
  678. }
  679. @keyframes rotateoutBR{
  680.     0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
  681.     100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
  682. }
  683. /* 翻转 */
  684. @-webkit-keyframes flip{
  685.     0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
  686.     40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
  687.     50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
  688.     80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}
  689.     100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
  690. }
  691. @-moz-keyframes flip{
  692.     0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}
  693.     40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}
  694.     50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}
  695.     80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}
  696.     100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}
  697. }
  698. @-ms-keyframes flip{
  699.     0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}
  700.     40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}
  701.     50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}
  702.     80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}
  703.     100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}
  704. }
  705. @keyframes flip{
  706.     0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
  707.     40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
  708.     50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
  709.     80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}
  710.     100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
  711. }
  712. /* 翻入-X轴 */
  713. @-webkit-keyframes flipinX{
  714.     0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
  715.     40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
  716.     70%{-webkit-transform:perspective(400px) rotateX(10deg);}
  717.     100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
  718. }
  719. @-moz-keyframes flipinX{
  720.     0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
  721.     40%{-moz-transform:perspective(400px) rotateX(-10deg);}
  722.     70%{-moz-transform:perspective(400px) rotateX(10deg);}
  723.     100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
  724. }
  725. @-ms-keyframes flipinX{
  726.     0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
  727.     40%{-ms-transform:perspective(400px) rotateX(-10deg);}
  728.     70%{-ms-transform:perspective(400px) rotateX(10deg);}
  729.     100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
  730. }
  731. @keyframes flipinX{
  732.     0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
  733.     40%{transform:perspective(400px) rotateX(-10deg);}
  734.     70%{transform:perspective(400px) rotateX(10deg);}
  735.     100%{transform:perspective(400px) rotateX(0);opacity:1;}
  736. }
  737. /* 翻入-Y轴 */
  738. @-webkit-keyframes flipinY{
  739.     0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
  740.     40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
  741.     70%{-webkit-transform:perspective(400px) rotateY(10deg);}
  742.     100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
  743. }
  744. @-moz-keyframes flipinY{
  745.     0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
  746.     40%{-moz-transform:perspective(400px) rotateY(-10deg);}
  747.     70%{-moz-transform:perspective(400px) rotateY(10deg);}
  748.     100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
  749. }
  750. @-ms-keyframes flipinY{
  751.     0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
  752.     40%{-ms-transform:perspective(400px) rotateY(-10deg);}
  753.     70%{-ms-transform:perspective(400px) rotateY(10deg);}
  754.     100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
  755. }
  756. @keyframes flipinY{
  757.     0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
  758.     40%{transform:perspective(400px) rotateY(-10deg);}
  759.     70%{transform:perspective(400px) rotateY(10deg);}
  760.     100%{transform:perspective(400px) rotateY(0);opacity:1;}
  761. }
  762. /* 翻出-X轴 */
  763. @-webkit-keyframes flipoutX{
  764.     0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;}
  765.     100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
  766. }
  767. @-moz-keyframes flipoutX{
  768.     0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;}
  769.     100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;}
  770. }
  771. @-ms-keyframes flipoutX{
  772.     0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;}
  773.     100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;}
  774. }
  775. @keyframes flipoutX{
  776.     0%{transform:perspective(400px) rotateX(0);opacity:1;}
  777.     100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
  778. }
  779. /* 翻出-Y轴 */
  780. @-webkit-keyframes flipoutY{
  781.     0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;}
  782.     100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
  783. }
  784. @-moz-keyframes flipoutY{
  785.     0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;}
  786.     100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;}
  787. }
  788. @-ms-keyframes flipoutY{
  789.     0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;}
  790.     100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;}
  791. }
  792. @keyframes flipoutY{
  793.     0%{transform:perspective(400px) rotateY(0);opacity:1;}
  794.     100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
  795. }
  796. /* 闪烁 */
  797. @-webkit-keyframes flash{
  798.     0%,50%,100%{opacity:1;}
  799.     25%,75%{opacity:0;}
  800. }
  801. @-moz-keyframes flash{
  802.     0%,50%,100%{opacity:1;}
  803.     25%,75%{opacity:0;}
  804. }
  805. @-ms-keyframes flash{
  806.     0%,50%,100%{opacity:1;}
  807.     25%,75%{opacity:0;}
  808. }
  809. @keyframes flash{
  810.     0%,50%,100%{opacity:1;}
  811.     25%,75%{opacity:0;}
  812. }
  813. /* 震颤 */
  814. @-webkit-keyframes shake{
  815.     0%,100%{-webkit-transform:translateX(0);}
  816.     10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
  817.     20%,40%,60%,80%{-webkit-transform:translateX(10px);}
  818. }
  819. @-moz-keyframes shake{
  820.     0%,100%{-moz-transform:translateX(0);}
  821.     10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
  822.     20%,40%,60%,80%{-moz-transform:translateX(10px);}
  823. }
  824. @-ms-keyframes shake{
  825.     0%,100%{-ms-transform:translateX(0);}
  826.     10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
  827.     20%,40%,60%,80%{-ms-transform:translateX(10px);}
  828. }
  829. @keyframes shake{
  830.     0%,100%{transform:translateX(0);}
  831.     10%,30%,50%,70%,90%{transform:translateX(-10px);}
  832.     20%,40%,60%,80%{transform:translateX(10px);}
  833. }
  834. /* 摇摆 */
  835. @-webkit-keyframes swing{
  836.     20%{-webkit-transform:rotate(15deg);}
  837.     40%{-webkit-transform:rotate(-10deg);}
  838.     60%{-webkit-transform:rotate(5deg);}
  839.     80%{-webkit-transform:rotate(-5deg);}
  840.     100%{-webkit-transform:rotate(0);}
  841. }
  842. @-moz-keyframes swing{
  843.     20%{-moz-transform:rotate(15deg);}
  844.     40%{-moz-transform:rotate(-10deg);}
  845.     60%{-moz-transform:rotate(5deg);}
  846.     80%{-moz-transform:rotate(-5deg);}
  847.     100%{-moz-transform:rotate(0);}
  848. }
  849. @-ms-keyframes swing{
  850.     20%{-ms-transform:rotate(15deg);}
  851.     40%{-ms-transform:rotate(-10deg);}
  852.     60%{-ms-transform:rotate(5deg);}
  853.     80%{-ms-transform:rotate(-5deg);}
  854.     100%{-ms-transform:rotate(0);}
  855. }
  856. @keyframes swing{
  857.     20%{transform:rotate(15deg);}
  858.     40%{transform:rotate(-10deg);}
  859.     60%{transform:rotate(5deg);}
  860.     80%{transform:rotate(-5deg);}
  861.     100%{transform:rotate(0);}
  862. }
  863. /* 摇晃 */
  864. @-webkit-keyframes wobble{
  865.     0%{-webkit-transform:translateX(0);}
  866.     15%{-webkit-transform:translateX(-100px) rotate(-5deg);}
  867.     30%{-webkit-transform:translateX(80px) rotate(3deg);}
  868.     45%{-webkit-transform:translateX(-65px) rotate(-3deg);}
  869.     60%{-webkit-transform:translateX(40px) rotate(2deg);}
  870.     75%{-webkit-transform:translateX(-20px) rotate(-1deg);}
  871.     100%{-webkit-transform:translateX(0);}
  872. }
  873. @-moz-keyframes wobble{
  874.     0%{-moz-transform:translateX(0);}
  875.     15%{-moz-transform:translateX(-100px) rotate(-5deg);}
  876.     30%{-moz-transform:translateX(80px) rotate(3deg);}
  877.     45%{-moz-transform:translateX(-65px) rotate(-3deg);}
  878.     60%{-moz-transform:translateX(40px) rotate(2deg);}
  879.     75%{-moz-transform:translateX(-20px) rotate(-1deg);}
  880.     100%{-moz-transform:translateX(0);}
  881. }
  882. @-ms-keyframes wobble{
  883.     0%{-ms-transform:translateX(0);}
  884.     15%{-ms-transform:translateX(-100px) rotate(-5deg);}
  885.     30%{-ms-transform:translateX(80px) rotate(3deg);}
  886.     45%{-ms-transform:translateX(-65px) rotate(-3deg);}
  887.     60%{-ms-transform:translateX(40px) rotate(2deg);}
  888.     75%{-ms-transform:translateX(-20px) rotate(-1deg);}
  889.     100%{-ms-transform:translateX(0);}
  890. }
  891. @keyframes wobble{
  892.     0%{transform:translateX(0);}
  893.     15%{transform:translateX(-100px) rotate(-5deg);}
  894.     30%{transform:translateX(80px) rotate(3deg);}
  895.     45%{transform:translateX(-65px) rotate(-3deg);}
  896.     60%{transform:translateX(40px) rotate(2deg);}
  897.     75%{transform:translateX(-20px) rotate(-1deg);}
  898.     100%{transform:translateX(0);}
  899. }
  900. /* 震铃 */
  901. @-webkit-keyframes ring{
  902.     0%{-webkit-transform:scale(1);}
  903.     10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
  904.     30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}
  905.     40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}
  906.     100%{-webkit-transform:scale(1) rotate(0);}
  907. }
  908. @-moz-keyframes ring{
  909.     0%{-moz-transform:scale(1);}
  910.     10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
  911.     30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}
  912.     40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
  913.     100%{-moz-transform:scale(1) rotate(0);}
  914. }
  915. @-ms-keyframes ring{
  916.     0%{-ms-transform:scale(1);}
  917.     10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}
  918.     30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}
  919.     40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
  920.     100%{-ms-transform:scale(1) rotate(0);}
  921. }
  922. @keyframes ring{
  923.     0%{transform:scale(1);}
  924.     10%,20%{transform:scale(0.9) rotate(-3deg);}
  925.     30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}
  926.     40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
  927.     100%{transform:scale(1) rotate(0);}
  928. }

转自：https://blog.csdn.net/luanpeng825485697/article/details/77752629

css3常用动画大全：translate、scale、opacity、rotate （转）的更多相关文章

  1. 编写自己的代码库(css3常用动画的实现)

    编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...

  2. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

  3. css3 常用动画 随笔

    /* animation */.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s e ...

  4. css3常用动画样式文件move.css

    move.css zoomIn  zoomInDownouter-circlearrowTop expandOpen fadeIn  fadeInNormal  fadeInUp   fadeInRi ...

  5. css3常用动画效果集合01

    /*由右到左进场*/ .FromRightToLeft{ -webkit-animation:FromRightToLeft 500s .2s ease both; } @-webkit-keyfra ...

  6. css3常用动画

    //有道云笔记链接 http://note.youdao.com/s/72qbBVyv  

  7. Android动画效果translate、scale、alpha、rotate详解

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  8. Android动画效果 translate、scale、alpha、rotate 切换Activity动画 控件位置调整

    2011.10.28注:如果需要控件停在动画后的位置,需要设置android:fillAfter属性为true,在set节点中.默认在动画结束后回到动画前位置.设置android:fillAfter后 ...

  9. css3 新特性（2D translate 移动，rotate 旋转 ， scale 缩放）

    1.transform(转换)可以实现元素的位移,旋转,缩放等效果(可以简单理解为变形) 移动:translate            旋转:rotate          缩放:scale 2. ...

随机推荐

  1. MFC使用ado连接SQLserver

    https://blog.csdn.net/GK_2014/article/details/50530103

  2. PAT B1037 在霍格沃兹找零钱

    AC代码 #include <cstdio> #include <algorithm> using namespace std; char flag = 0; //判断付钱数是 ...

  3. RHEL8运维新利器--Cockpit使用方法

    在web浏览器中查看服务器并使用鼠标执行系统任务,很容易管理存储.配置网络和检查日志等操作. # 安装cockpit yum -y install cockpit # 启用cockpit system ...

  4. Neo4j Cypher语法（三）

    目录 5 函数 5.1 谓词函数 5.2 标量函数 5.3 聚合函数 5.4 列表函数 5.5 数学函数 5.6 字符串函数 5.7 Udf与用户自定义函数 6 模式 6.1 索引 6.2 限制 7 ...

  5. 怎样理解DOM

    一句话总结: DOM 是一个 js 对象. 他可以赋予 js 控制 html 文档的能力.  全称: Document Object Model. DOM 的最小组成单位是: 节点 , 节点有7种类型 ...

  6. Android获取网络时间的方法

    一.通过免费或者收费的API接口获取 1.免费 QQ:http://cgi.im.qq.com/cgi-bin/cgi_svrtime 淘宝:http://api.m.taobao.com/rest/ ...

  7. jvm 中内存的栈和数据结构中的栈的区别

    1.常见的数据结构:栈.队列.数组.链表和红黑树,java内存划分 2.JYM中的栈是先进先出,先入栈的先执行: 2.数据结构中的栈是先进后出,类似手枪的弹夹,先进入的子弹最后才发射: 3.数据结构中 ...

  8. JVM学习(二)：垃圾回收

    我刚工作的时候问一个前辈,我们能针对JVM做出什么样的优化.前辈说,我们系统现在的性能并不需要调优,用默认的配置就能满足现在的需求了.我又问,那你为什么要看JVM相关的书呢?前辈微微一笑,悠悠地来了句 ...

  9. Java反射【四、成员变量的反射和构造的反射】

    获取一个类下所有字段信息 Field[] fs = c.getFields(); 获取所有字段(public) Field[] fs = c.getDeclaredFields(); 获取所有声明字段 ...

  10. shell脚本基础和grep文本处理工具企业应用3

    文本处理工具:    linux上文本处理三剑客        grep,egrep,fgrep:文本过滤工具(模式:pattern)工具            grep:默认支持的是基本正则表达式: ...