首页 > 代码库 > 关键帧动画：@keyframes

关键帧动画：@keyframes

2024-08-31 00:35:34   216人阅读

关键帧动画：@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


联系
我们