animation属性整理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="abc.css">
  6.     <title></title>
  7.     <style>
  8.             .div1{
  9.                 width500px;
  10.                 height500px;
  11.                 border-radius: 50%;
  12.                 margin:0 auto;
  13.                 background-color#333;
  14.                 animation: changewidth 2s ease-in-out 0s 50 alternate ;}/*这里animation的值可以填6个,分别标志为①②③④⑤⑥*/
  15.         @keyframes changewidth
  16.         {
  17.                 0%{width500px;background-colorblack;}
  18.                 50%{width: 0;background-coloraqua;}
  19.                 100%{width500px;background-colorred;}
  20.          }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="div1"></div>
  25. </body>
  26. </html>
大概是这样的一个公式:
  1. animation:①②③④⑤⑥;
  2. @keyframes ①
  3. {
  4. 0%{ **};
  5. 10%{ *};
  6. ……
  7. 100%{*};
  8. }
①的值为animation-name,顾名思义,为名字,待会儿下面就要艾特它 ②的值为animation-duration,即一个动画持续的的时间,设置0.5s肯定比5s快很多 ③的值为animation-timing-function,即该动画的变化速度,例如,可以设置它一直以相同速度转,也可以先慢再快再慢等 它的值有: 这里写图片描述 ④的值为animation-delay,即在一个动画开始之前等待多长时间,可以设置2s,也可以设置为0 ⑤的值为animation-iteration-count,顾名思义,是动画进行的次数,一个完整动画连续进行的次数,直接填整数就好了 ⑥的值为animation-direction,即动画的方向,有以下选择可填: 这里写图片描述
  1. @keyframes ①
  2. {
  3. 这里面可以填很多属性,如:widthheightfontbackgroundcolor……
  4. }
  本文地址:http://liuyanzhao.com/3427.html 转载请注明    

发表评论

目前评论:1