动画：定义动画关键帧方案

text
1 
      @keyframes 动画名{

from{}

0%{ }

……

to 100%{}

百分比表示动画播放时间

}

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 
     /*animation-name  设置动画关键帧/ 名称*/ 


           animation-name: move; 


           /* 动画播放时间*/ 


           animation-duration: 2s; 


           /* 动画完成后的停止位置 


           backwards: 播放完成后回到第一个关键帧样式； 


           forwards: 播放完成后停在最后一个关键帧样式; 


           */ 


           animation-fill-mode: forwards; 


           /* 动画关键帧执行方向 


           指动画方案从0% 执行到100% 代表一次 normal 


              动画方案从100-0%     reverse 


                    0-100-0    alternate 


                    100-0-100   alternate-reverse 


             */ 


           animation-direction: alternate-reverse; 


           /* 动画播放次数   infinite  无限次播放*/ 


           animation-iteration-count: infinite; 


           /* 动画时间曲线方程*/ 


           animation-timing-function: ease-in; 


           /* 动画延时*/ 


           animation-delay: 


      /* 动画播放状态控制 


           running  播放 


           paused   暂停*/ 


           animation-play-state: paused; 


  引用动画库

原文地址：https://blog.csdn.net/cathei/article/details/80823897?ops_request_misc=&request_id=7c3a0a7c6c264218995b401c42e60581&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-16-80823897-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88