css动画特效的应用详解

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

      @keyframes 动画名{ 

from{}

0%{ }

……

to 100%{}

百分比表示动画播放时间

}

     /*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