您的位置：首页 > 其它

animation的属性值

2020-03-08 14:24 148 查看

animation的属性值

animation的含义：是动画的意思，是随着时间改变元素的属性值，它在没有的触发任何事件的情况下也可以随着时间的变化来改变css的属性值，从而达到一种动画的效果。css3的animetion就是需要明确的动画属性值。
初始效果——动画帧——动画帧——最终效果

animetion有8个属性值，如下：

1、animetion-name:它是检索或设置对象所应用的动画名称，与@keyframes起使用的，有两种语法。
语法1：@keyframes：myname{ from{初始的状态属性} to{结束的状态属性}}
语法2：@keyframes：myname{ 0%{初始的状态属性} 100%{结束的状态属性}}
2、animetion-duration:检索或设置动画对象的设置时间，以秒和毫秒为单位（s/ms）。
3、animetion-delay：它是检索或设置动画对象的延迟时间：以秒和毫秒为单位的。
4、animetion=timing-funtion:它是检索会设置动画的过度的。它有六个值：
linear:线性过度
ease:平滑过渡
ease-in:由慢到快
ease-out:由快到慢
ease-in-out:由慢到快，再到慢
step-start:马上跳到动画每一帧的结束状态
5、animetion-iteration-count:检索或设置动画的循环次数（有两个值：infinite：无线循环/number:循环次数）
6、animetion-direction:它是检索或设置对象动画，在循环中是否反向运动的状态。（属性值：normal 正常方向 / reverse 反向运行 / alternate-reverse：先反向运行在正向运行，并持续交替运行）

7、animetion-fill-mode:动画播放之前或之后，其动画效果为可见或不见 none：默认值
,运动结束后回到原来的位置，在延迟的时候，让0%延迟后生效 backwords:在延迟时，让0%在延迟前生效
forwords:在运动结束后，停到结束位置 both:让backwords和forwords同时生效

8、animetion-play-state:检索或设置动画对象的状态不（属性值：running/paused）
例子

<style type="text/css">
body{width: 1000px;
height:1000px;}

.box{
width: 100px;
height: 100px;
background: #f0f;
margin: 50px auto;
animation: move 2s  ;
animation-delay: 0.5s;
animation-iteration-count: 5;/*设置动画的循环次数*/
}
@-webkit-keyframes move{
0%{background: #00ff00;}
50%{background: #c333c3;}
100%{background: #e6e6e6;}
}
.box2{
width: 100px;
height: 100px;
background: #00f;
margin: 80px auto;
animation: donghua 5s ;
animation-delay: 1s;/*动画延迟1秒*/
}
div:hover{
animation-play-state: paused;/*鼠标滑过之后动画停止*/
}
</style>

<body>
<div class="box">
ggggg
</div>
<div class="box2">

</div>


以上是分享就到这啦，如有欠缺的欢迎建议喔

  • 点赞
  • 收藏
  • 分享
  • 文章举报
qq_41936213 发布了3 篇原创文章 · 获赞 0 · 访问量 12 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航