animation的属性值_annimation annimation diff prompt-CSDN博客

本文链接：https://blog.csdn.net/AFei223/article/details/104439361

（逆战班）animation 属性是一个简写属性，用于设置动画属性。属性值详解如下：

在这里插入图片描述

1.annimation-name属性

给当前标签的要用到annimation动画起一个名字，具体用法：
	@keyframes  动画的名字{
			from{}
			to{}
		}
从而规定当前标签需要进行怎样的运动

2.animation-duration属性

规定完成动画需要的时间，以秒或毫秒计。
例：animation-duration:1s;
	animation-duration:1000ms;

3.animation-delay属性

规定在动画开始之前的延迟。
例：annimation-delay：1s;

4.animation-iteration-count属性

规定动画应该播放的次数。默认值是1。
例：
	animation-iteration-count:n;//播放n次
	animation-iteration-counr:infinite //播放无限次

5.animation-timing-function属性

规定动画的速度曲线。
linear--------速度均匀（默认）
ease-------低速加快变慢
ease-in-------低速开始
ease-out--------低速结束
ease-in-out-------低速开始结束
cubic-bezier(n,n,n,n)-------0-1数值自己定义

6.animation-fill-mode属性

规定动画播放之前或之后，其动画效果是否可见。默认值：none。
none : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards :  在延迟的情况下，让0%在延迟前生效
forwards  :  在运动结束的之后，停到结束位置
both  :  backwards和forwards同时生效

7.animation-direction属性

规定是否应该轮流反向播放动画。默认值：normal
normal :  按照顺序正常播放
reverse :  动画反向播放.
alternate :  动画在奇数次正向，偶数次反向播放
alternate-reverse :  动画在奇数次反向，偶数次正向播放

以上所有属性可以写成复合形式。

注：animation-duration要写在animation-delay前面。

例子：

<style>
*{margin: 0;padding: 0;}
        #box{width: 100px ;height: 100px;margin: 50px auto;border: 1px black solid;}
        #box div{width: 20px;height: 20px;background: red;animation: move 4s linear .5s infinite; }
        @keyframes move{
            0%{transform: translate(0,0);}
            25%{transform: translate(80px,0);}
            50%{transform: translate(80px,80px);}
            75%{transform: translate(0px,80px);}
            100%{transform: translate(0px,0px);}
        }
 </style>
<body>
    <div id="box">
        <div></div>
    </div>
</body>