关键帧动画：@keyframes
Posted 看着风跑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关键帧动画：@keyframes相关的知识，希望对你有一定的参考价值。
关键帧动画：@keyframes：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>关键帧动画</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 background: yellow; 11 12 /*关键帧动画的调用*/ 13 /*1.动画名:作用告诉系统使用哪一组动画*/ 14 animation-name: candy,hou2; 15 16 /*2.动画的持续时长*/ 17 animation-duration: 1s,2s; 18 /*上述两个属性必须要有*/ 19 20 /*3.变化曲线*/ 21 animation-timing-function: ease-in-out; 22 23 /*4.推迟时长*/ 24 animation-delay: 2s; 25 26 /*5.重复次数 27 infinite:一直重复,(开始设置延迟再重复时就不会有延迟)*/ 28 animation-iteration-count: 4; 29 30 /*6.动画方向 31 normal:正方向 32 reverse:反方向 33 alternate:次数为奇数时,正方向;为偶数时,反方向 34 alternate-reverse:次数为奇数时,反方向;为偶数时,正方向 */ 35 animation-direction: alternate; 36 37 /*7.动画完成时的状态 38 backwards:动画完成时,保持动画开始之前的状态 39 forwards:动画完成时,保持动画结束之后的状态 40 both:同时向前向后,表现形式跟forwards一样 */ 41 animation-fill-mode:forwards; 42 } 43 44 /*声明一组关键帧动画*/ 45 @keyframes candy{ 46 /* from:表示起点 47 to:表示终点*/ 48 from{ 49 opacity: 1; 50 /*width: 500px;*/ 51 } 52 to{ 53 opacity: 0; 54 /*width: 200px;*/ 55 } 56 } 57 58 @keyframes hou2{ 59 from{ 60 height: 200px; 61 } 62 to{ 63 height: 500px; 64 } 65 } 66 67 /**/ 68 .div2{ 69 width: 200px; 70 height: 200px; 71 background: red; 72 margin: 100px auto; 73 animation: heart 1s linear /*infinite*/,candy 1s /*infinite*/; 74 } 75 @keyframes heart{ 76 0%{ 77 transform: scale(1,1); 78 } 79 20%{ 80 transform: scale(1.3,1.3); 81 } 82 50%{ 83 transform: scale(2,2); 84 } 85 80%{ 86 transform: scale(1.3,1.3); 87 } 88 100%{ 89 transform: scale(1,1); 90 } 91 } 92 </style> 93 </head> 94 <body> 95 <!--关键帧动画 96 在使用关键帧动画之前,我们得先声明一组关键帧动画,使用@keyframes进行声明 97 2.声明完成之后,要在该标签的样式中,通过animation使用该组动画 98 --> 99 <div class="div1"></div> 100 101 <div class="div2"></div> 102 </body> 103 </html>
以上是关于关键帧动画：@keyframes的主要内容，如果未能解决你的问题，请参考以下文章