CSS3动画
在CSS3中,animation属性用于实现元素的动画。
animation属性跟transition属性在功能实现上是非常相似的,都是通过改变元素的属性值来实现动画效果。但是,这两者实际上有着本质的区别
- 对于transition属性来说,它只能将元素的某一个属性从一个属性值过渡到另一个属性值
- 对于animation属性来说,它可以将元素的某一个属性从第1个属性值过渡到第2个属性值,然后还可以继续过渡到第3个属性值,以此类推。
从以上推断出:transition属性(即CSS3过渡)只能实现一次性的动画效果,而animation属性(即CSS3动画)可以实现连续性的动画效果。
CSS3中的animation属性就是为了解决这些问题而提出的。animation属性可以通过控制关键帧来控制动画的每一步,从而实现更为复杂的动画效果。
使用animation属性实现CSS3动画需要两步
- 定义动画:用@keyframes规则来定义动画的样式
- 调用动画:用animation属性来调用@keyframes规则定义的动画
使用@keyframes规则创建动画
概念:在CSS3中,使用@keyframes规则来创建动画。创建动画是指从一个CSS样式到另一个CSS样式逐步变化而产生动画效果的过程。在创建动画中,可以多次更改CSS样式的设定。
一个动画由很多画面组成,每一个画面叫做一帧。其中,角色或者物体运动变化的关键动作所处的帧叫做关键帧。创建动画必须定义关键帧。
语法:
@keyframes animation_name{keyframes-selector{css-styles;}
}
属性值说明
属性值 | 说明 |
---|---|
animation | 当前动画的名称,它将作为引用该动画时的唯一标识,因此不能为空 |
keyframes-selector | 关键帧选择器,指定当前关键帧在整个动画过程中的位置,其值可以是from和to,或者百分比。其中,from和0%效果相同(表示动画的开始),to和100%效果相同(表示动画的结束) |
css-style | 定义执行到当前关键帧时对应的动画状态,由CSS样式属性进行定义,多个属性之间用分号(;)分隔,且属性不能为空。 |
实例:仅定义开头和结尾
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>@keyframes创建动画</title><style>*{padding:0;margin:0;}div{width:200px;height:150px;margin:20px auto;border-radius:20px;background-color:blueviolet;}/* 定义动画 */@keyframes colorChange{0%{background-color:blueviolet;}100%{background-color:greenyellow;}}/* 调用动画,这里可以先看后面 */div:hover{animation:colorChange 2s linear 0s 5 normal;}</style></head><body><div class="a"></div></body>
</html>
运行结果
实例:定义多个关键帧
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>@keyframes创建动画</title><style>*{padding:0;margin:0;}div{width:200px;height:150px;margin:20px auto;border-radius:50%;background-color:darkblue;cursor:pointer;}/* 定义动画 */@keyframes colorChange{0%{background-color:darkblue;}25%{background:radial-gradient(circle at top,orange 20%,yellow 40%);}50%{background:radial-gradient(circle at center,orange 20%,yellow 40%);}75%{background:radial-gradient(circle at bottom,orange 20%,yellow 40%);}100%{background-color:red;}}/* 调用动画 */div:hover{animation:colorChange 5s linear;}</style></head><body><div class="a"></div></body>
</html>
运行结果
@keyframes其中的百分比是“持续时间”。在实例:定义多个关键帧中,定义持续时间为5s,则0%指的是0s时,25%指的是1.25s,50%指的是2.5s,75%指的是3.75s,100%指的是5s.
使用animation属性调用动画
概念:CSS3中的animation属性用于调用由@keyframes规则创建的动画。
animation属性是一个复合属性,主要包括6个子属性。
属性值 | 说明 |
---|---|
animation-name | 对于指定CSS属性进行进行操作 |
animation-duration | 动画的持续时间 |
animation-timing-function | 动画的速率变化方式 |
animation-delay | 动画的延迟时间 |
animation-iteration-count | 动画的播放次数 |
animation-direction | 动画的播放方向,正向还是反向 |
动画名称:animation-name
概念:animation-name属性用于定义要调用的由@keyframes规则创建的动画名称。调用多个动画名称要以逗号隔开。
语法:
anination-name:keyframename|none;
属性值
属性值 | 说明 |
---|---|
none | 默认值,表示不应用任何动画,该设置也可以用于取消动画 |
keyframename | 用于定义要调用的动画名称。多个动画名称以英文逗号隔开 |
animation-name调用的动画名需要和@keyframes规则定义的动画名完全一致(区分大小写),如果不一致将不会产生任何动画效果。
注意:在animation属性上指定多个以逗号分隔的值时,它们会将根据值的数量以不同的方式分配给animation-name属性指定的动画。
持续时间:animation-duration
概念:animation-duration属性用于定义完成一个动画周期所需要的时间。
语法:
animation-duration:time;
属性值
属性值 | 说明 |
---|---|
time | 它表示以秒(s)或毫秒(ms)为单位的时间。默认值为0,表示没有任何动画效果。当该参数的值为负数时,则被视为0。 |
动画方式:animation-timing-function
概念:animation-timing-function属性用来定义动画的速度曲线。“速度曲线”,指的是动画执行过程中的速度变化情况。
语法:
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
属性值
属性值 | 说明 | 速率 |
---|---|---|
linear | 规定以相同速度开始至结束的过渡效果,即”匀速“ | |
ease | 默认值,规定慢速开始,变快之后慢速结束的过渡效果 | |
ease-in | 规定速度越来越快的过渡效果 | |
ease-out | 规定速度越来越慢的过渡效果 | |
ease-in-out | 规定以慢速开始和结束的过渡效果 | |
cubic-bezier(n.n,n,n) | 在cubic-bezier函数中自定义值,参数是0~1的数值 |
说明:animation-timing-function属性取值跟CSS3过渡的transition-timing-function是一样的
延迟时间:animation-delay
概念:animation-delay属性用来定义执行动画之前等待的时间,即指的是规定动画什么时候开始
语法:
animation-delay:time;
属性值
属性值 | 说明 |
---|---|
time | 它表示以秒(s)或毫秒(ms)为单位的时间。默认值为0,表示不延迟(不等待) |
播放次数:animation-iteration-count
概念:animation-iteration-count属性用来定义动画的播放次数
语法:
animation-iteration-count:number|infinite;
属性值
属性值 | 说明 |
---|---|
number | 表示动画重复的次数。默认值为1,即指的是动画默认只播放1次。若属性值为一个整数,则规定动画播放次数。若属性值为一个非整数值,则表示播放动画循环的一部分。例如,0.5s将动画只播放一半。负值是无效的。 |
infinite | 表示动画无限次循环播放 |
说明:animation-iteration-count属性可以指定一个或多个以逗号分隔的值
播放方向:animation-direction
概念:animation-direction属性用来定义动画的播放方向。
语法:
animation-direction:normal|alternate;
属性值
属性值 | 说明 |
---|---|
normal | 默认值,表示动画每次都顺向播放 |
reverse | 表示动画每次都反方向播放 |
alternate | 表示动画会在奇数次(1次,3次,5次等)顺向播放,但在偶数次(2次,4次,6次等)逆向播放。 |
实例:loading效果
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">*{padding:0;margin:0;}.contain{width:100px;margin:20px auto;position:relative;}.contain>i{position:absolute;top:0;width:5px;height:40px;background-color:blueviolet;border-radius:6px;}/*定义动画*/@keyframes loading{0%{transform:scaleY(1);}50%{transform:scaleY(0.5);}100%{transform:scaleY(1);}}/*第1个i元素*/.contain>i:nth-child(1){left: 0;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.1s;animation-iteration-count:infinite;}/*第2个i元素*/.contain>i:nth-child(2){left: 10px;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.3s;animation-iteration-count:infinite;}/*第3个i元素*/.contain>i:nth-child(3){left: 20px;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.6s;animation-iteration-count:infinite;}/*第4个i元素*/.contain>i:nth-child(4) {left: 30px;animation-name:loading;animation-duration:1s;animation-timing-function:ease-in;animation-delay:0.3s;animation-iteration-count:infinite;}</style>
</head>
<body><div class="contain"><i></i><i></i><i></i><i></i></div>
</body>
</html>
运行结果
播放状态:animation-play-state
概念:animation-play-state属性用来定义动画的播放状态。
语法:
animation-play-state:running|paused;
属性值
属性值 | 说明 |
---|---|
running | 默认值,表示是动画正在播放中 |
paused | 表示动画已被暂停 |
animation属性
概念:animation属性是一个复合属性,可以将以上单项动画子属性在一行内进行复合设置。简写以上繁琐的属性。
语法:
animation:animation-name|animation-duration|animation-timing-function animation-delay|animation-iteration-count|animation-direction;
说明:定义animation属性时必须指定animation-name和animation-duration属性,否则没有动画,或者动画持续时间默认为0,不会播放动画,其余子属性可省略。
实例:loading效果
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">*{padding:0;margin:0;}.contain{width:100px;margin:20px auto;position:relative;}.contain>i{position:absolute;top:0;width:5px;height:40px;background-color:blueviolet;border-radius:6px;}/*定义动画*/@keyframes loading{0%{transform:scaleY(1);}50%{transform:scaleY(0.5);}100%{transform:scaleY(1);}}/*第1个i元素*/.contain>i:nth-child(1){left: 0;animation: loading 1s ease-in 0.1s infinite;}/*第2个i元素*/.contain>i:nth-child(2){left: 10px;animation: loading 1s ease-in 0.3s infinite;}/*第3个i元素*/.contain>i:nth-child(3){left: 20px;animation: loading 1s ease-in 0.6s infinite;}/*第4个i元素*/.contain>i:nth-child(4) {left: 30px;animation: loading 1s ease-in 0.3s infinite;}</style>
</head>
<body><div class="contain"><i></i><i></i><i></i><i></i></div>
</body>
</html>
运行结果
从效果上来看,这两者是等价的。相比较用animation属性的子属性,直接使用animation复合属性上更加简洁清楚。