CSS的animation特性应用案例解读

2021-01-20 07:08 jianzhan

1、animation的英语的语法
 
1、@keyframes——插进重要帧
 
(1)FormTo方式：

CSS Code拷贝內容到剪贴板
  1. @keyframes demo {   
  2.      from {   
  3.        Properties:Properties value;   
  4.      }   
  5.      Percentage {   
  6.        Properties:Properties value;   
  7.      }   
  8.      to {   
  9.        Properties:Properties value;   
  10.      }   
  11. }  

 
 
(2)百分比的方式：
 

CSS Code拷贝內容到剪贴板
  1. @keyframes demo {   
  2.       0% {   
  3.          Properties:Properties value;   
  4.       }   
  5.       Percentage {   
  6.          Properties:Properties value;   
  7.       }   
  8.       100% {   
  9.          Properties:Properties value;   
  10.       }   
  11. }  

 
 
2、animation-name——界定动漫的名字

animation-name: none | “动漫的名字”;
 
 
(1)动漫的名字是由Keyframes建立的动漫名，这里务必和建立的动漫名维持1致。假如不1致,将不可以完成任何动漫实际效果
(2)none为默认设置值，当值为none时，将沒有任何动漫实际效果
 
3、animation-duration
 
animation-duration: time (s)
 
 
animation-duration是特定元素播发动漫所不断的時间，赋值为标值，企业为秒(s)，其默认设置值为“0”。
 
4、animation-timing-function
 
animation-timing-function:ease(缓存) || ease-in(加快) || ease-out(减速) || ease-in-out(先加快后减速) || linear(匀速) || cubic-bezier(自定1个時间曲线图)
 
 
animation-timing-function是用来特定动漫的播发方法，具备下列6种转换方法：ease(缓存);ease-in(加快);ease-out(减速);ease-in-out(先加快后减速);linear(匀速);cubic-bezier(自定1个時间曲线图)。
 
5、animation-delay
 
animation-delay: time(s)
 
 
animation-delay:是用来特定元素动漫刚开始時间。赋值为标值，企业为秒(s)，其默认设置值为“0”。这个特性和animation-duration应用方式是1样的。
 
6、animation-iteration-count
 
animation-iteration-count:infinite || number
 
animation-iteration-count是特定元素播发动漫的循环系统次数，其赋值为数据，默认设置值为“1”或infinite(无尽次数循环系统)。
 
7、animation-direction
 
animation-direction: normal || alternate
 
animation-direction是特定元素动漫播发的方位，假如是normal，那末动漫的每次循环系统全是向前播发;假如是alternate，那末动漫播发在第偶多次向前播发，第单数次向反向播发。
 
8、animation-play-state

animation-play-state:running || paused
 
 
animation-play-state关键是用来操纵元素动漫的播发情况。其关键有两个值，running和paused，在其中running为默认设置值。这个特性现阶段非常少核心适用，因此只是略微提1下。

2、animation恶性事件插口
实际上现阶段基础的便是3个恶性事件罢了：刚开始、迭代更新、完毕。刚开始和完毕都了解是甚么意思。至于这个迭代更新，因为animation中有个iteration-count特性，它能够界定动漫反复的次数，因而动漫会有很多次刚开始和完毕。可是真实的“刚开始”和“完毕”恶性事件是有关全部动漫的，她们只会开启1次，而正中间因为反复动漫引发的“完毕并刚开始下1次”将开启全部“迭代更新”恶性事件。
　　这3个恶性事件的规范名字是：
　　　　刚开始：animationstart
　　　　迭代更新：animationiteration
　　　　完毕：animationend
　　可是现阶段版本号的Chrome必须再加webkit前缀，并且还要留意尺寸写
　　　　刚开始：webkitAnimationStart
　　　　迭代更新：webkitAnimationIteration
　　　　完毕：webkitAnimationEnd
　　最终是案例编码和截图

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. @-webkit-keyframes test {   
  3.   0% {background:red;}   
  4.   25% {background:green;}   
  5.   50% {background:blue;}   
  6.   100% {background:red;}   
  7. }   
  8. @keyframes test {   
  9.   0% {background:red;}   
  10.   25% {background:green;}   
  11.   50% {background:blue;}   
  12.   100% {background:red;}   
  13. }   
  14. </style>   
  15. <script>   
  16. onload=function(){   
  17.   var html=document.documentElement;   
  18.   //界定恶性事件回调函数涵数   
  19.   var start=function(){   
  20.     console.log("start");   
  21.   },iteration=function(e){   
  22.     console.log(e);   
  23.   },end=function(){   
  24.     console.log("end");   
  25.   };   
  26.   //关联恶性事件   
  27.   html.addEventListener("webkitAnimationIteration",iteration);   
  28.   html.addEventListener("animationiteration",iteration);   
  29.   html.addEventListener("webkitAnimationStart",start);   
  30.   html.addEventListener("animationstart",start);   
  31.   html.addEventListener("webkitAnimationEnd",end);   
  32.   html.addEventListener("animationend",end);   
  33.   //刚开始实行动漫   
  34.   html.style.animation=   
  35.   html.style.WebkitAnimation=   
  36.   "test 1s linear 0s 3";   
  37. };   
  38. </script>  

为您推荐