html的动画属性,CSS3动画属性

在了解css3动画属性之前我们要知道动画的原理，就是一定时间内播放多张图片，也可以说是把整个运动过程分成多份，如下图，下图人物从右至左的变化过程即动画。

动画属性：

1.animation-name:设置动画的名字，指定动画运动的名称

2.@keyframes (关键帧):关键帧的设置是设置不同阶段下特定的CSS样式的值

语法：@keyframes animationname(动画名){

from{}

to{}

}

例如:

@keyframes animationname{

from{background:black;}

to{background:red;}

}

from与to分别代表动画的开始与结束样式，也可以用0%与100%表示，如：

@keyframes animationname{

0%{background:black;}

100%{background:red;}

}

3.animation-duration：指定动画播放完成花费的时间

用法：animation-duration：time

4.animation-delay:定义动画何时开始，值以秒或毫秒div{animation-delay:2s}等待两秒，然后开始动画。允许为负值，负数时间使动画立马开始，但会跳过负数时间进入动画。

5.animation-iteration-count(动画播放次数)，有两种值，一种为数，一种是infinite。例如：div{animation-iteration-count：3s}播放动画三次，div{animation-iteration-count：infinite}动画播放无限次

6.animation-timing-function(动画速度曲线函数)，属性值linear(匀速)、ease(默认值，动画以低速开始，然后加快，在结束前减速)、ease-in(动画以低速开始，然后加速)、ease-out(动画以高速开始，然后减速)、ease-in-out(动画先加速后减速)、三次贝塞尔曲线(速度曲线，可以使用自己的值)

7.animation-fill-mode:规定动画播放完之前或之后，其动画效果是否可见，默认情况下，动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧播放完之后停止影响元素。其值有：

(1)none:默认值，动画执行之前和之后不会应用任何样式到目标元素。

(2)forwards:在运动结束时，停止在当前位置。

(3)backwards:动画在延迟的情况下，让0%在延迟一开始就变效。

(4)both:backwords和forwords同时生效。

8.animation-direction(定义动画播放的方向)，属性值有：

(1)normal:默认值，永远都是正向，从0%到100%；

(2)reverse：动画永远都是反向，从100%到0%；

(3)alternate：一次正向从0%到100%一次反向从100%到0%；

m0_46381479

发布了1 篇原创文章 · 获赞 1 · 访问量 10

私信

关注

标签：CSS3,动画,100%,animation,0%,播放,ease,属性

来源： https://blog.csdn.net/m0_46381479/article/details/104451035