animation属性整理

avatar 2016年03月15日16:40:05 1 3549 views
博主分享免费Java教学视频,B站账号:Java刘哥 ,长期提供技术问题解决、项目定制:本站商品点此
  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

转载请注明



  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0