一、animates.css

animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。

查看演示：

https://daneden.github.io/animate.css/

github地址：

https://github.com/daneden/animate.css

二、magic.css动画库

查看演示：

http://www.17sucai.com/pins/demoshow/10001

github地址：

https://github.com/miniMAC/magic

三、Effect.css

针对不同UI的CSS3动画和过渡效果集，包含了丰富的CSS3动画和过渡效果，包括：

  • Modal
  • overlay
  • button
  • list
  • listscroll
  • Caption
  • 等等

查看演示：

http://www.gbtags.com/gb/linkviewer/3147.htm

四、hover.css

Hover.css是一套使用CSS3动画实现的Hover特效集锦，包含了：

  • 2D变形
  • 边框过渡效果
  • 阴影过渡效果
  • 页脚翻转效果

查看演示：

http://ianlunn.github.io/Hover/

github地址：

https://github.com/IanLunn/Hover

五、常用动画

  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:;}
  91.     100%{opacity:;}
  92. }
  93. @-moz-keyframes fadein{
  94.     0%{opacity:;}
  95.     100%{opacity:;}
  96. }
  97. @-ms-keyframes fadein{
  98.     0%{opacity:;}
  99.     100%{opacity:;}
  100. }
  101. @keyframes fadein{
  102.     0%{opacity:;}
  103.     100%{opacity:;}
  104. }
  105. /* 淡入-从上 */
  106. @-webkit-keyframes fadeinT{
  107.     0%{opacity:;-webkit-transform:translateY(-100px);}
  108.     100%{opacity:;-webkit-transform:translateY(0);}
  109. }
  110. @-moz-keyframes fadeinT{
  111.     0%{opacity:;-moz-transform:translateY(-100px);}
  112.     100%{opacity:;-moz-transform:translateY(0);}
  113. }
  114. @-ms-keyframes fadeinT{
  115.     0%{opacity:;-ms-transform:translateY(-100px);}
  116.     100%{opacity:;-ms-transform:translateY(0);}
  117. }
  118. @keyframes fadeinT{
  119.     0%{opacity:;transform:translateY(-100px);}
  120.     100%{opacity:;transform:translateY(0);}
  121. }
  122. /* 淡入-从右 */
  123. @-webkit-keyframes fadeinR{
  124.     0%{opacity:;-webkit-transform:translateX(100px);}
  125.     100%{opacity:;-webkit-transform:translateX(0);}
  126. }
  127. @-moz-keyframes fadeinR{
  128.     0%{opacity:;-moz-transform:translateX(100px);}
  129.     100%{opacity:;-moz-transform:translateX(0);}
  130. }
  131. @-ms-keyframes fadeinR{
  132.     0%{opacity:;-ms-transform:translateX(100px);}
  133.     100%{opacity:;-ms-transform:translateX(0);}
  134. }
  135. @keyframes fadeinR{
  136.     0%{opacity:;transform:translateX(100px);}
  137.     100%{opacity:;transform:translateX(0);}
  138. }
  139. /* 淡入-从下 */
  140. @-webkit-keyframes fadeinB{
  141.     0%{opacity:;-webkit-transform:translateY(100px);}
  142.     100%{opacity:;-webkit-transform:translateY(0);}
  143. }
  144. @-moz-keyframes fadeinB{
  145.     0%{opacity:;-moz-transform:translateY(100px);}
  146.     100%{opacity:;-moz-transform:translateY(0);}
  147. }
  148. @-ms-keyframes fadeinB{
  149.     0%{opacity:;-ms-transform:translateY(100px);}
  150.     100%{opacity:;-ms-transform:translateY(0);}
  151. }
  152. @keyframes fadeinB{
  153.     0%{opacity:;transform:translateY(100px);}
  154.     100%{opacity:;transform:translateY(0);}
  155. }
  156. /* 淡入-从左 */
  157. @-webkit-keyframes fadeinL{
  158.     0%{opacity:;-webkit-transform:translateX(-100px);}
  159.     100%{opacity:;-webkit-transform:translateX(0);}
  160. }
  161. @-moz-keyframes fadeinL{
  162.     0%{opacity:;-moz-transform:translateX(-100px);}
  163.     100%{opacity:;-moz-transform:translateX(0);}
  164. }
  165. @-ms-keyframes fadeinL{
  166.     0%{opacity:;-ms-transform:translateX(-100px);}
  167.     100%{opacity:;-ms-transform:translateX(0);}
  168. }
  169. @keyframes fadeinL{
  170.     0%{opacity:;transform:translateX(-100px);}
  171.     100%{opacity:;transform:translateX(0);}
  172. }
  173. /* 淡出 */
  174. @-webkit-keyframes fadeout{
  175.     0%{opacity:;}
  176.     100%{opacity:;}
  177. }
  178. @-moz-keyframes fadeout{
  179.     0%{opacity:;}
  180.     100%{opacity:;}
  181. }
  182. @-ms-keyframes fadeout{
  183.     0%{opacity:;}
  184.     100%{opacity:;}
  185. }
  186. @keyframes fadeout{
  187.     0%{opacity:;}
  188.     100%{opacity:;}
  189. }
  190. /* 淡出-向上 */
  191. @-webkit-keyframes fadeoutT{
  192.     0%{opacity:;-webkit-transform:translateY(0);}
  193.     100%{opacity:;-webkit-transform:translateY(-100px);}
  194. }
  195. @-moz-keyframes fadeoutT{
  196.     0%{opacity:;-moz-transform:translateY(0);}
  197.     100%{opacity:;-moz-transform:translateY(-100px);}
  198. }
  199. @-ms-keyframes fadeoutT{
  200.     0%{opacity:;-ms-transform:translateY(0);}
  201.     100%{opacity:;-ms-transform:translateY(-100px);}
  202. }
  203. @keyframes fadeoutT{
  204.     0%{opacity:;transform:translateY(0);}
  205.     100%{opacity:;transform:translateY(-100px);}
  206. }
  207. /* 淡出-向右 */
  208. @-webkit-keyframes fadeoutR{
  209.     0%{opacity:;-webkit-transform:translateX(0);}
  210.     100%{opacity:;-webkit-transform:translateX(100px);}
  211. }
  212. @-moz-keyframes fadeoutR{
  213.     0%{opacity:;-moz-transform:translateX(0);}
  214.     100%{opacity:;-moz-transform:translateX(100px);}
  215. }
  216. @-ms-keyframes fadeoutR{
  217.     0%{opacity:;-ms-transform:translateX(0);}
  218.     100%{opacity:;-ms-transform:translateX(100px);}
  219. }
  220. @keyframes fadeoutR{
  221.     0%{opacity:;transform:translateX(0);}
  222.     100%{opacity:;transform:translateX(100px);}
  223. }
  224. /* 淡出-向下 */
  225. @-webkit-keyframes fadeoutB{
  226.     0%{opacity:;-webkit-transform:translateY(0);}
  227.     100%{opacity:;-webkit-transform:translateY(100px);}
  228. }
  229. @-moz-keyframes fadeoutB{
  230.     0%{opacity:;-moz-transform:translateY(0);}
  231.     100%{opacity:;-moz-transform:translateY(100px);}
  232. }
  233. @-ms-keyframes fadeoutB{
  234.     0%{opacity:;-ms-transform:translateY(0);}
  235.     100%{opacity:;-ms-transform:translateY(100px);}
  236. }
  237. @keyframes fadeoutB{
  238.     0%{opacity:;transform:translateY(0);}
  239.     100%{opacity:;transform:translateY(100px);}
  240. }
  241. /* 淡出-向左 */
  242. @-webkit-keyframes fadeoutL{
  243.     0%{opacity:;-webkit-transform:translateX(0);}
  244.     100%{opacity:;-webkit-transform:translateX(-100px);}
  245. }
  246. @-moz-keyframes fadeoutL{
  247.     0%{opacity:;-moz-transform:translateX(0);}
  248.     100%{opacity:;-moz-transform:translateX(-100px);}
  249. }
  250. @-ms-keyframes fadeoutL{
  251.     0%{opacity:;-ms-transform:translateX(0);}
  252.     100%{opacity:;-ms-transform:translateX(-100px);}
  253. }
  254. @keyframes fadeoutL{
  255.     0%{opacity:;transform:translateX(0);}
  256.     100%{opacity:;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:;-webkit-transform:scale(0.3);}
  282.     50%{opacity:;-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:;-moz-transform:scale(0.3);}
  288.     50%{opacity:;-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:;-ms-transform:scale(0.3);}
  294.     50%{opacity:;-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:;transform:scale(0.3);}
  300.     50%{opacity:;transform:scale(1.05);}
  301.     70%{transform:scale(0.9);}
  302.     100%{transform:scale(1);}
  303. }
  304. /* 弹入-从上 */
  305. @-webkit-keyframes bounceinT{
  306.     0%{opacity:;-webkit-transform:translateY(-100px);}
  307.     60%{opacity:;-webkit-transform:translateY(30px);}
  308.     80%{-webkit-transform:translateY(-10px);}
  309.     100%{-webkit-transform:translateY(0);}
  310. }
  311. @-moz-keyframes bounceinT{
  312.     0%{opacity:;-moz-transform:translateY(-100px);}
  313.     60%{opacity:;-moz-transform:translateY(30px);}
  314.     80%{-moz-transform:translateY(-10px);}
  315.     100%{-moz-transform:translateY(0);}
  316. }
  317. @-ms-keyframes bounceinT{
  318.     0%{opacity:;-ms-transform:translateY(-100px);}
  319.     60%{opacity:;-ms-transform:translateY(30px);}
  320.     80%{-ms-transform:translateY(-10px);}
  321.     100%{-ms-transform:translateY(0);}
  322. }
  323. @keyframes bounceinT{
  324.     0%{opacity:;transform:translateY(-100px);}
  325.     60%{opacity:;transform:translateY(30px);}
  326.     80%{transform:translateY(-10px);}
  327.     100%{transform:translateY(0);}
  328. }
  329. /* 弹入-从右 */
  330. @-webkit-keyframes bounceinR{
  331.     0%{opacity:;-webkit-transform:translateX(100px);}
  332.     60%{opacity:;-webkit-transform:translateX(-30px);}
  333.     80%{-webkit-transform:translateX(10px);}
  334.     100%{-webkit-transform:translateX(0);}
  335. }
  336. @-moz-keyframes bounceinR{
  337.     0%{opacity:;-moz-transform:translateX(100px);}
  338.     60%{opacity:;-moz-transform:translateX(-30px);}
  339.     80%{-moz-transform:translateX(10px);}
  340.     100%{-moz-transform:translateX(0);}
  341. }
  342. @-ms-keyframes bounceinR{
  343.     0%{opacity:;-ms-transform:translateX(100px);}
  344.     60%{opacity:;-ms-transform:translateX(-30px);}
  345.     80%{-ms-transform:translateX(10px);}
  346.     100%{-ms-transform:translateX(0);}
  347. }
  348. @keyframes bounceinR{
  349.     0%{opacity:;transform:translateX(100px);}
  350.     60%{opacity:;transform:translateX(-30px);}
  351.     80%{transform:translateX(10px);}
  352.     100%{transform:translateX(0);}
  353. }
  354. /* 弹入-从下 */
  355. @-webkit-keyframes bounceinB{
  356.     0%{opacity:;-webkit-transform:translateY(100px);}
  357.     60%{opacity:;-webkit-transform:translateY(-30px);}
  358.     80%{-webkit-transform:translateY(10px);}
  359.     100%{-webkit-transform:translateY(0);}
  360. }
  361. @-moz-keyframes bounceinB{
  362.     0%{opacity:;-moz-transform:translateY(100px);}
  363.     60%{opacity:;-moz-transform:translateY(-30px);}
  364.     80%{-moz-transform:translateY(10px);}
  365.     100%{-moz-transform:translateY(0);}
  366. }
  367. @-ms-keyframes bounceinB{
  368.     0%{opacity:;-ms-transform:translateY(100px);}
  369.     60%{opacity:;-ms-transform:translateY(-30px);}
  370.     80%{-ms-transform:translateY(10px);}
  371.     100%{-ms-transform:translateY(0);}
  372. }
  373. @keyframes bounceinB{
  374.     0%{opacity:;transform:translateY(100px);}
  375.     60%{opacity:;transform:translateY(-30px);}
  376.     80%{transform:translateY(10px);}
  377.     100%{transform:translateY(0);}
  378. }
  379. /* 弹入-从左 */
  380. @-webkit-keyframes bounceinL{
  381.     0%{opacity:;-webkit-transform:translateX(-100px);}
  382.     60%{opacity:;-webkit-transform:translateX(30px);}
  383.     80%{-webkit-transform:translateX(-10px);}
  384.     100%{-webkit-transform:translateX(0);}
  385. }
  386. @-moz-keyframes bounceinL{
  387.     0%{opacity:;-moz-transform:translateX(-100px);}
  388.     60%{opacity:;-moz-transform:translateX(30px);}
  389.     80%{-moz-transform:translateX(-10px);}
  390.     100%{-moz-transform:translateX(0);}
  391. }
  392. @-ms-keyframes bounceinL{
  393.     0%{opacity:;-ms-transform:translateX(-100px);}
  394.     60%{opacity:;-ms-transform:translateX(30px);}
  395.     80%{-ms-transform:translateX(-10px);}
  396.     100%{-ms-transform:translateX(0);}
  397. }
  398. @keyframes bounceinL{
  399.     0%{opacity:;transform:translateX(-100px);}
  400.     60%{opacity:;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:;-webkit-transform:scale(1.1);}
  409.     100%{opacity:;-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:;-moz-transform:scale(1.1);}
  415.     100%{opacity:;-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:;-ms-transform:scale(1.1);}
  421.     100%{opacity:;-ms-transform:scale(0.3);}
  422. }
  423. @keyframes bounceout{
  424.     0%{transform:scale(1);}
  425.     25%{transform:scale(0.95);}
  426.     50%{opacity:;transform:scale(1.1);}
  427.     100%{opacity:;transform:scale(0.3);}
  428. }
  429. /* 弹出-向上*/
  430. @-webkit-keyframes bounceoutT{
  431.     0%{-webkit-transform:translateY(0);}
  432.     20%{opacity:;-webkit-transform:translateY(20px);}
  433.     100%{opacity:;-webkit-transform:translateY(-100px);}
  434. }
  435. @-moz-keyframes bounceoutT{
  436.     0%{-moz-transform:translateY(0);}
  437.     20%{opacity:;-moz-transform:translateY(20px);}
  438.     100%{opacity:;-moz-transform:translateY(-100px);}
  439. }
  440. @-ms-keyframes bounceoutT{
  441.     0%{-ms-transform:translateY(0);}
  442.     20%{opacity:;-ms-transform:translateY(20px);}
  443.     100%{opacity:;-ms-transform:translateY(-100px);}
  444. }
  445. @keyframes bounceoutT{
  446.     0%{transform:translateY(0);}
  447.     20%{opacity:;transform:translateY(20px);}
  448.     100%{opacity:;transform:translateY(-100px);}
  449. }
  450. /* 弹出-向右*/
  451. @-webkit-keyframes bounceoutR{
  452.     0%{-webkit-transform:translateX(0);}
  453.     20%{opacity:;-webkit-transform:translateX(-20px);}
  454.     100%{opacity:;-webkit-transform:translateX(100px);}
  455. }
  456. @-moz-keyframes bounceoutR{
  457.     0%{-moz-transform:translateX(0);}
  458.     20%{opacity:;-moz-transform:translateX(-20px);}
  459.     100%{opacity:;-moz-transform:translateX(100px);}
  460. }
  461. @-ms-keyframes bounceoutR{
  462.     0%{-ms-transform:translateX(0);}
  463.     20%{opacity:;-ms-transform:translateX(-20px);}
  464.     100%{opacity:;-ms-transform:translateX(100px);}
  465. }
  466. @keyframes bounceoutR{
  467.     0%{transform:translateX(0);}
  468.     20%{opacity:;transform:translateX(-20px);}
  469.     100%{opacity:;transform:translateX(100px);}
  470. }
  471. /* 弹出-向下 */
  472. @-webkit-keyframes bounceoutB{
  473.     0%{-webkit-transform:translateY(0);}
  474.     20%{opacity:;-webkit-transform:translateY(-20px);}
  475.     100%{opacity:;-webkit-transform:translateY(100px);}
  476. }
  477. @-moz-keyframes bounceoutB{
  478.     0%{-moz-transform:translateY(0);}
  479.     20%{opacity:;-moz-transform:translateY(-20px);}
  480.     100%{opacity:;-moz-transform:translateY(100px);}
  481. }
  482. @-ms-keyframes bounceoutB{
  483.     0%{-ms-transform:translateY(0);}
  484.     20%{opacity:;-ms-transform:translateY(-20px);}
  485.     100%{opacity:;-ms-transform:translateY(100px);}
  486. }
  487. @keyframes bounceoutB{
  488.     0%{transform:translateY(0);}
  489.     20%{opacity:;transform:translateY(-20px);}
  490.     100%{opacity:;transform:translateY(100px);}
  491. }
  492. /* 弹出-向左 */
  493. @-webkit-keyframes bounceoutL{
  494.     0%{-webkit-transform:translateX(0);}
  495.     20%{opacity:;-webkit-transform:translateX(20px);}
  496.     100%{opacity:;-webkit-transform:translateX(-100px);}
  497. }
  498. @-moz-keyframes bounceoutL{
  499.     0%{-moz-transform:translateX(0);}
  500.     20%{opacity:;-moz-transform:translateX(20px);}
  501.     100%{opacity:;-moz-transform:translateX(-100px);}
  502. }
  503. @-ms-keyframes bounceoutL{
  504.     0%{-ms-transform:translateX(0);}
  505.     20%{opacity:;-ms-transform:translateX(20px);}
  506.     100%{opacity:;-ms-transform:translateX(-100px);}
  507. }
  508. @keyframes bounceoutL{
  509.     0%{transform:translateX(0);}
  510.     20%{opacity:;transform:translateX(20px);}
  511.     100%{opacity:;transform:translateX(-200px);}
  512. }
  513. /* 转入 */
  514. @-webkit-keyframes rotatein{
  515.     0%{opacity:;-webkit-transform:rotate(-200deg);}
  516.     100%{opacity:;-webkit-transform:rotate(0);}
  517. }
  518. @-moz-keyframes rotatein{
  519.     0%{opacity:;-moz-transform:rotate(-200deg);}
  520.     100%{opacity:;-moz-transform:rotate(0);}
  521. }
  522. @-ms-keyframes rotatein{
  523.     0%{opacity:;-ms-transform:rotate(-200deg);}
  524.     100%{opacity:;-ms-transform:rotate(0);}
  525. }
  526. @keyframes rotatein{
  527.     0%{opacity:;transform:rotate(-200deg);}
  528.     100%{opacity:;transform:rotate(0);}
  529. }
  530. /* 转入-从左上 */
  531. @-webkit-keyframes rotateinLT{
  532.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:;}
  533.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
  534. }
  535. @-moz-keyframes rotateinLT{
  536.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:;}
  537.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
  538. }
  539. @-ms-keyframes rotateinLT{
  540.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:;}
  541.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
  542. }
  543. @keyframes rotateinLT{
  544.     0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:;}
  545.     100%{transform-origin:left bottom;transform:rotate(0);opacity:;}
  546. }
  547. /* 转入-从左下 */
  548. @-webkit-keyframes rotateineftB{
  549.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:;}
  550.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
  551. }
  552. @-moz-keyframes rotateineftB{
  553.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:;}
  554.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
  555. }
  556. @-ms-keyframes rotateineftB{
  557.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:;}
  558.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
  559. }
  560. @keyframes rotateineftB{
  561.     0%{transform-origin:left bottom;transform:rotate(90deg);opacity:;}
  562.     100%{transform-origin:left bottom;transform:rotate(0);opacity:;}
  563. }
  564. /* 转入-从右上 */
  565. @-webkit-keyframes rotateinRT{
  566.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:;}
  567.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
  568. }
  569. @-moz-keyframes rotateinRT{
  570.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:;}
  571.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
  572. }
  573. @-ms-keyframes rotateinRT{
  574.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:;}
  575.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
  576. }
  577. @keyframes rotateinRT{
  578.     0%{transform-origin:right bottom;transform:rotate(90deg);opacity:;}
  579.     100%{transform-origin:right bottom;transform:rotate(0);opacity:;}
  580. }
  581. /* 转入-从右下*/
  582. @-webkit-keyframes rotateinRB{
  583.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:;}
  584.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
  585. }
  586. @-moz-keyframes rotateinRB{
  587.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:;}
  588.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
  589. }
  590. @-ms-keyframes rotateinRB{
  591.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:;}
  592.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
  593. }
  594. @keyframes rotateinRB{
  595.     0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:;}
  596.     100%{transform-origin:right bottom;transform:rotate(0);opacity:;}
  597. }
  598. /* 转出 */
  599. @-webkit-keyframes rotateout{
  600.     0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:;}
  601.     100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:;}
  602. }
  603. @-moz-keyframes rotateout{
  604.     0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:;}
  605.     100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:;}
  606. }
  607. @-ms-keyframes rotateout{
  608.     0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:;}
  609.     100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:;}
  610. }
  611. @keyframes rotateout{
  612.     0%{transform-origin:center center;transform:rotate(0);opacity:;}
  613.     100%{transform-origin:center center;transform:rotate(200deg);opacity:;}
  614. }
  615. /* 转出-向左上 */
  616. @-webkit-keyframes rotateoutLT{
  617.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
  618.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:;}
  619. }
  620. @-moz-keyframes rotateoutLT{
  621.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
  622.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:;}
  623. }
  624. @-ms-keyframes rotateoutLT{
  625.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
  626.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:;}
  627. }
  628. @keyframes rotateoutLT{
  629.     0%{transform-origin:left bottom;transform:rotate(0);opacity:;}
  630.     100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:;}
  631. }
  632. /* 转出-向左下 */
  633. @-webkit-keyframes rotateoutLB{
  634.     0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}
  635.     100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:;}
  636. }
  637. @-moz-keyframes rotateoutLB{
  638.     0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}
  639.     100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:;}
  640. }
  641. @-ms-keyframes rotateoutLB{
  642.     0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}
  643.     100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:;}
  644. }
  645. @keyframes rotateoutLB{
  646.     0%{transform-origin:left bottom;transform:rotate(0);opacity:;}
  647.     100%{transform-origin:left bottom;transform:rotate(90deg);opacity:;}
  648. }
  649. /* 转出-向右上 */
  650. @-webkit-keyframes rotateoutRT{
  651.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
  652.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:;}
  653. }
  654. @-moz-keyframes rotateoutRT{
  655.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
  656.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:;}
  657. }
  658. @-ms-keyframes rotateoutRT{
  659.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
  660.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:;}
  661. }
  662. @keyframes rotateoutRT{
  663.     0%{transform-origin:right bottom;transform:rotate(0);opacity:;}
  664.     100%{transform-origin:right bottom;transform:rotate(90deg);opacity:;}
  665. }
  666. /* 转出-向右下 */
  667. @-webkit-keyframes rotateoutBR{
  668.     0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}
  669.     100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:;}
  670. }
  671. @-moz-keyframes rotateoutBR{
  672.     0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}
  673.     100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:;}
  674. }
  675. @-ms-keyframes rotateoutBR{
  676.     0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}
  677.     100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:;}
  678. }
  679. @keyframes rotateoutBR{
  680.     0%{transform-origin:right bottom;transform:rotate(0);opacity:;}
  681.     100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:;}
  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:;}
  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:;}
  718. }
  719. @-moz-keyframes flipinX{
  720.     0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:;}
  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:;}
  724. }
  725. @-ms-keyframes flipinX{
  726.     0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:;}
  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:;}
  730. }
  731. @keyframes flipinX{
  732.     0%{transform:perspective(400px) rotateX(90deg);opacity:;}
  733.     40%{transform:perspective(400px) rotateX(-10deg);}
  734.     70%{transform:perspective(400px) rotateX(10deg);}
  735.     100%{transform:perspective(400px) rotateX(0);opacity:;}
  736. }
  737. /* 翻入-Y轴 */
  738. @-webkit-keyframes flipinY{
  739.     0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:;}
  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:;}
  743. }
  744. @-moz-keyframes flipinY{
  745.     0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:;}
  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:;}
  749. }
  750. @-ms-keyframes flipinY{
  751.     0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:;}
  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:;}
  755. }
  756. @keyframes flipinY{
  757.     0%{transform:perspective(400px) rotateY(90deg);opacity:;}
  758.     40%{transform:perspective(400px) rotateY(-10deg);}
  759.     70%{transform:perspective(400px) rotateY(10deg);}
  760.     100%{transform:perspective(400px) rotateY(0);opacity:;}
  761. }
  762. /* 翻出-X轴 */
  763. @-webkit-keyframes flipoutX{
  764.     0%{-webkit-transform:perspective(400px) rotateX(0);opacity:;}
  765.     100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:;}
  766. }
  767. @-moz-keyframes flipoutX{
  768.     0%{-moz-transform:perspective(400px) rotateX(0);opacity:;}
  769.     100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:;}
  770. }
  771. @-ms-keyframes flipoutX{
  772.     0%{-ms-transform:perspective(400px) rotateX(0);opacity:;}
  773.     100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:;}
  774. }
  775. @keyframes flipoutX{
  776.     0%{transform:perspective(400px) rotateX(0);opacity:;}
  777.     100%{transform:perspective(400px) rotateX(90deg);opacity:;}
  778. }
  779. /* 翻出-Y轴 */
  780. @-webkit-keyframes flipoutY{
  781.     0%{-webkit-transform:perspective(400px) rotateY(0);opacity:;}
  782.     100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:;}
  783. }
  784. @-moz-keyframes flipoutY{
  785.     0%{-moz-transform:perspective(400px) rotateY(0);opacity:;}
  786.     100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:;}
  787. }
  788. @-ms-keyframes flipoutY{
  789.     0%{-ms-transform:perspective(400px) rotateY(0);opacity:;}
  790.     100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:;}
  791. }
  792. @keyframes flipoutY{
  793.     0%{transform:perspective(400px) rotateY(0);opacity:;}
  794.     100%{transform:perspective(400px) rotateY(90deg);opacity:;}
  795. }
  796. /* 闪烁 */
  797. @-webkit-keyframes flash{
  798.     0%,50%,100%{opacity:;}
  799.     25%,75%{opacity:;}
  800. }
  801. @-moz-keyframes flash{
  802.     0%,50%,100%{opacity:;}
  803.     25%,75%{opacity:;}
  804. }
  805. @-ms-keyframes flash{
  806.     0%,50%,100%{opacity:;}
  807.     25%,75%{opacity:;}
  808. }
  809. @keyframes flash{
  810.     0%,50%,100%{opacity:;}
  811.     25%,75%{opacity:;}
  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. }

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4968769.html有问题欢迎与我讨论，共同进步。

css3常用动画+动画库的更多相关文章

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

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

  2. css3 动画+动画库

    css3 动画 实现原理 1.transition 过渡:https://www.runoob.com/cssref/css3-pr-transition.html 语法:( transition的 ...

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

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

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

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

  5. css3 常用动画 随笔

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

  6. css3常用动画大全：translate、scale、opacity、rotate （转）

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

  7. css3常用动画

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

  8. kissui.scrollanim页面滚动动画库插件

    简介 kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件.通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果. 下载地址及演示 在线演示 在线下载 安装 ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

随机推荐

  1. java1.8的默认方法的坑

    默认方法: 接口的方法一直都是抽象方法,自从1.8出来了之后,新增了一个默认方法.可以在接口中实现方法 1.默认方法需要用default修饰 2.默认方法不能是静态的 3.子接口继承了2个相同签名的默 ...

  2. oracle RAC的VIP和scan

    我们都知道Oracle RAC中每个节点都有一个虚拟IP,简称VIP,与公网IP在同一个网段. 没有VIP时,Oracle客户端是靠"TCP/IP协议栈超时"来判断服务器故障.而T ...

  3. SQL SERVER常用定义查询

    https://msdn.microsoft.com/en-us/library/ms175081.aspx

  4. 为友盟消息推送开发的PHP SDK（composer版）：可以按省发Android push

    一直以来APP希望按省市县推送Android push,只能自己分析用户经纬度,打tag发送. 现在终于有服务商提供了. 友盟消息推送 可以“按省推送”,很方便. 我为友盟做了PHP SDK(comp ...

  5. 避开unity的坑（转摘）

    避开unity的坑(转摘) 以下总结一部分来自经验之谈,一部分来自其他人的分享.总的来讲,unity开发原型和效果.验证想法,确实是无比便利.可能一个月就把核心玩法做得差不多.强大的编辑器功能让我们也 ...

  6. GpsLocationProvider中的sendExtraCommand方法

    Android系统源码中GpsLocationProvider类中包含sendExtraCommand方法,代码如下 @Override public boolean sendExtraCommand ...

  7. Android 内容观察者的原理

    拦截短信,比如当发短信的时候,就把短信读取出来,当系统的短信发生变化的时候,大叫一声,把数据发送到公共的消息邮箱里面,我们的应用通过内容观察者观察公共的消息邮箱 获取ContentResolver对象 ...

  8. 【代码笔记】iOS-改变导航条标题的颜色为红色

    一,效果图. 二,代码. RootViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional se ...

  9. AFNetworking菊花转圈圈

    注意,此圈圈是在左上角,特别小,不注意是看不到的 加载这个东西,要先引入头文件: AFNetworkActivityIndicatorManager.h 然后只要一句代码就可以实现,默认情况下AFN的 ...

  10. java验证码组件kaptcha使用方法

    使用方法: 项目中导入kaptcha-2.3.jar包在web.xml里面新增: <!-- 登陆验证码Kaptcha -->    <servlet>        <s ...