本文共 4462 字，大约阅读时间需要 14 分钟。
Css3中关于动画制作的有3个属性：Transform,Transition,Animation.
我首先学习用Animation如何实现一个动画效果。CSS3中的Animation和HTML5中的绘制效果不同，Animation只应用在页面上已存在的DOM元素上，而且跟Flash和javascript制作出来的动画效果又不一样，因为使用CSS3的animation制作动画可以省去复杂的js,jquery代码。
在学习animation之前，先了解一个特殊的东西，就是KeyFrames,叫做关键帧。
Keyframes有自己的语法规则，他的命名由“@keyframes”开头，后面紧接着“动画名称” 和一对花括号{},括号中是一些不同时间段的样式规则。”@keyframes” 中的样式规则是由多个百分比构成的，如 0%到100%之间。我们可以在这个规则中创建多个百分比，同时分别给每一个百分比中需要有动画效果的元素加上不同的属性，从而达到一种在不断变化的效果。比如移动，改变元素颜色，位置，大小，形状等。同样也可以使用from ，to来代表一个动画从哪开始，到哪结束。From相当于0%而to相当于100%。
需要注意的地方是：0%不能像别的属性取值一样把百分比符号省略，在这里必须加上% (0%),如果没有加上的话，这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。
Keyframes可以指定任何顺序排列 来决定Animation动画变化的关键位置。
具体语法规则如下：
@keyframes Name{
0%{ Properties: value;}
Percentage{ Properties: value;}
100%{ Properties: value; }
}
1
2
3
4
5
6
7
8
9
@keyframesName{
0%{Properties:value;}
Percentage{Properties:value;}
100%{Properties:value;}
}
或者写成from ，to 的形式：
@keyframes name{
From{ Properties: value;}
Percentage{ Properties: value;}
To{ Properties: value;}
}
1
2
3
4
5
6
7
8
9
@keyframesname{
From{Properties:value;}
Percentage{Properties:value;}
To{Properties:value;}
}
其中name是一个动画名称，可以随便取，当然语义化更好一点。
Percentage是百分比值，可以根据需要添加多个百分比.
Properties为css的属性名。比如left,background等。Value就是相对应属性的属性值。
到目前为止animation动画只有webkit内核的浏览器支持，所以我们需要在上面的基础上加上-webkit前缀，据说firefox5可以支持CSS3的animation动画属性。
看一个W3C官网的实例：
这里我们定义了一定叫 “wobble”的动画，动画师从0%开始到100%时结束，中间还经历了40%和60%两个过程。上面代码具体意思是：wobble动画在0%时元素定位到left 为100px的位置，背景色为green；然后40%时元素过渡到left为150px的位置并且背景色为orange；60%时元素过渡到left为75px的位置，背景色为blue；最后100%结束动画的位置，元素又回到left为100px处，背景色变成red。假设我们设置这个动画有10s的执行时间，那么每一段执行的状态如下图所示：
Keyframes 定义好了以后，我们需要怎么去调用定义好的动画“wobble”？
CSS3的animation 类似于transition属性，他们都是随着时间改变元素的属性值。主要区别是transition需要触发一个事件(hover事件或click事件等)才会随其时间改变CSS属性；而animation在不需要触发任何事件就可以显式的随着时间的变化来改变元素CSS的属性值，从而达到一种动画效果。这样我们就可以直接在一个元素中调用animation的动画属性。基于这一点，css3的animation就需要明确动画属性值，需要keyframes来定义不同时间的CSS属性值，达到元素在不同时间段变化的效果。
下面我们来看看怎么让一个元素调用animation属性
.demo1{
Width:50px;
Height:50px;
Margin-left:100px;
@-webkit-keyframes ‘wobble’ {
%0{
Margin-left:100px;
Background:green;
}
40%{
Margin-left:150px;
Background:orange;
}
60%{
Margin-left:75px;
Background:blue;
}
100%{
Margin-left:100px;
Background:red;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@-webkit-keyframes‘wobble’{
%0{
Margin-left:100px;
Background:green;
}
40%{
Margin-left:150px;
Background:orange;
}
60%{
Margin-left:75px;
Background:blue;
}
100%{
Margin-left:100px;
Background:red;
}
}
Background：blue;
-webkit-animation-name:’wobble’;/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-delay:2s; /*动画延迟时间*/
-webkit-animation-duration:10s; /*动画持续时间*/
-webkit-animation-iteration-count:10;/*定义循环资料；infinite为无限次*/
-webkit-animation-timing-function:ease-in-out;/*动画频率，和transition-timing-function是一样的*/
-webkit-animation-direction:alternate;/*定义动画方式*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Background：blue;
-webkit-animation-name:’wobble’;/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-delay:2s;/*动画延迟时间*/
-webkit-animation-duration:10s;/*动画持续时间*/
-webkit-animation-iteration-count:10;/*定义循环资料；infinite为无限次*/
-webkit-animation-timing-function:ease-in-out;/*动画频率，和transition-timing-function是一样的*/
-webkit-animation-direction:alternate;/*定义动画方式*/
}
CSS Animation动画效果将会影响元素响应的CSS值，在整个动画过程中，元素的变化属性值完全由animation来控制，动画后面会覆盖前面的属性值。他们不会产生叠加效果，只是一次一次覆盖前一次出现的css属性。
Animation常用属性介绍：
1.animation-name: name | none
Animation-name:用来定义一个动画名称，主要有两个值，name是由keyframes创建的动画名，换句话说此处的name要和keyframes中的name一致，如果不一致，将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。另外这个属性与transition一样，我们可以附几个animation给一个元素,只需要用逗号,隔开。
2.animation-duration:
用来指定元素播放动画所持续的时长，取值 time为数值，单位为s秒。其默认值为“0”。这个属性跟transition中的transition-duration使用方法一样。
3. Animation-iteration-count: | infinite
Animation-iteration-count用来指定元素播放动画 循环的次数，其可以取值为数字，默认值为1，infinite为无限次数循环。
4. Animation-delay:
Animation-delay:用来指定元素动画开始时间。取值为为数值，单位为s(秒)，默认值为0。这个属性和tianstion-delay使用的方法一样的。
5. Animation-timing-function:
Animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，就是动画播放的方式。他和transition中的transition中的transition-timing-function一样，具有一下几种变换方式：ease, ease-in, ease-in-out, linear, cubic-bezier.
6.Animation-direction: normal | alternate
Animation-direction用来指定元素动画播放的方向，其中有两个值，默认值为normal，如果设置为normal时，动画每次循环都是向前播放；另外一个值alternate:作用是动画播放在第偶次数时向前播放，第奇数次时向反方向播放。
7. Animation-play-state: running | paused
用来控制动画的播放状态。其主要有两个值，running和paused。
Running为默认值。他们的作用类似我们的音乐播放器一样，可以通过paused将正在播放的动画停下，也可以通过running将暂停的动画重新播放。而我们这里的重新播放不一定是从元素动画开始播放，而是从暂停的位置开始播放。
转载地址：https://blog.csdn.net/weixin_33554514/article/details/112895399 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
