html动画-初级

最新推荐文章于 2022-11-10 09:48:01 发布

Sallery

最新推荐文章于 2022-11-10 09:48:01 发布

阅读量174

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Sallery/article/details/105199986

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

设置动画的属性：animation

animation-name: ; 动画的名字
animation-duration: ;动画的时间
animation-timing-function: ;动画变化的速度默认是easy,linear,ease-in,ease-out, 也可以设置贝塞尔曲线
animation-iteration-count: 3;设置动画执行几次 infinite无限次
animation-direction: alternate;s设置往返运动，奇数正常，偶数回来，reverse直接反方向运动
alternate-reverse 奇数回来，偶数反方向
animation-fill-mode: forwards;是动画保留最后一针的效果

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           .d1{
               width: 200px;
               height: 200px;
               background-color: aqua;
               /* 动画
               animation-name: ; 动画的名字
               animation-duration: ;动画的时间
               animation-timing-function: ;动画变化的速度默认是easy,linear,ease-in,ease-out,
               也可以设置贝塞尔曲线
               animation-iteration-count: 3;设置动画执行几次 infinite无限次
               animation-direction: alternate;s设置往返运动，奇数正常，偶数回来
               reverse直接反方向运动
               alternate-reverse 奇数回来，偶数反方向
               animation-fill-mode: forwards;是动画保留最后一针的效果
               */
               animation:donghua1 3s ;
               animation-timing-function:   cubic-bezier(0.6, 0.1, 1, 1.39) ;
               animation-iteration-count: 1;
               animation-direction: normal;
               animation-fill-mode: forwards;
           }
           @keyframes donghua1{
               /* from等同于百分之0*/
               0%{transform: translate(0,0);}
               33.3%{transform: translate(500px,0);}
               60%{transform: translate(200px,100px);}
               /* to相当于百分之百 */
               100%{transform: translate(500px,300px);}

           }
       </style>
   </head>
   <body>
       <div class="d1"></div>
   </body>
</html>