Fork me on GitHub

简述CSS3中的动画

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

1.在CSS3中的设置动画步骤:
a、通过@keyframes指定动画序列;
b、通过百分比将动画序列分割成多个节点;
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素; 示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//定义规则 
@keyframes move{
//move为规则名称
from{
background-color:yellow;
}
to {
background-color:red;
} }
//也可以以百分比的形式,设置多个节点
@keyframes move{
0%{
background-color:yellow;
} 50% {
background-color:red;
} 75% {
background-color:green;
} }
//最后在animation属性里应用
.div {
animation:move 1s;
}

2.animation 中的属性简述
a、animation-name设置动画序列名称;
b、animation-duration动画持续时间;
c、animation-delay动画延时时间;
d、animation-timing-function动画执行速度,linear(平均)、ease(慢快慢)、ease-in(慢快)、ease-out(快慢)、cubic-bezier(自定义速度); e、animation-play-state动画播放状态,running、paused;
f、animation-direction动画逆播,normal(正常,动画结束回到第一帧),reverse(与normal相反),alternate(动画完成,在倒放逆播),alternate-reverse(与alternate相反);
g、animation-fill-mode动画执行完毕后状态,forwards(保持最后一帧的状态)、backwards(回到第一帧);
h、animation-iteration-count动画执行次数,可以是1、2、3…inifinate表示无数次;
i、steps(60) 这里表示动画分成60步完成,一帧一帧的进行,这是第一个参数,第二个参数(可选)为start或end,默认情况下为end; 关于start和end 的区别:他们都规定了动画时间变化点,start是在两帧跳换前,end是在两帧跳换后; 比如:分两步,0%-100%,盒子颜色变化从红色变到绿色 如果设置start,他在0%跳换前,动画就执行了,所以我们刷新页面一进去就看到绿色,设置end的话,我们会一直看到红色,0%前动画不会执行,跳到100%后动画结束,这是绿色状态不可见的,还会变成红色。
总之,如果3s的动画执行时间,start和end的区别就是,到底是在3s前就执行,还是在3s后执行的区别。 参数值的顺序: 关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意 最后2个小例子熟悉一下: CSS3设置帧动画达到钟表效果:

-------------本文结束感谢您的阅读-------------

本文标题:简述CSS3中的动画

文章作者:陈晓拉尼

发布时间:2017年09月17日 - 12:09

最后更新:2019年09月05日 - 21:09

原始链接:http://yoursite.com/archives/3291.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。