CSS3
CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能,动画是其中之一。动画又分为,过度动画和帧动画,属性分别为transition和animation。
过渡动画
该动画对应的属性为transition,该有四个参数
transition:transition-name transition-duration transition-delay transition-timing-function
- transition-name:表示参与过渡的属性。如果想要元素过渡隐藏,display不会产生过渡的效果,可以使用opacity代替
- transition-duration:表示过度持续的时间,也就是从原始状态到目标状态经过的时间
- transition-delay:表示动画延迟时间,设置了这个属性动画不会立即执行,需要等待一会才执行,具体等待时长取决于具体的值,该属性值以秒为单位,默认是0s
- transition-timing-function:表示动画运动曲线,也就是参与动画的属性值随时间变化的快慢
这些属性顺序可以打乱,但先写的时间是动画持续时间,后写的时间是动画延迟时间
示例如下
<div class="box"></div>
.box {
width: 200px;
height: 200px;
background: greenyellow;
transition: width 2s 0s linear;
}
.box:hover {
width: 400px;
}
该动画为当鼠标浮动到元素上时,将width从200px变成400px,历时2s,无延迟(立即执行),匀速运动
过渡动画的缺点
需要一个触发动作,并不会在页面打开后就执行,并且不能设置执行次数
帧动画
帧动画弥补了过度动画的不足,帧动画不需要触发动作,可以在页面打开后立即执行并且还可以设置执行次数。
帧动画的属性为animation
animation: animation-name animation-duration animation-delay animation-timing-function animation-iteration-count animation-direction animation-fill-mode animation-play-state
- animation-name :表示参与动画的属性
- animation-duration :表示动画持续时间
- animation-delay :表示动画延迟时间
- animation-timing-function :表示动画运动曲线
- animation-iteration-count :表示动画次数
- animation-direction :表示动画方向
- animation-fill-mode :表示元素的属性值是动画之前的值还是动画之后的值
- animation-play-state:表示动画的状态,也就是暂停还是运行
帧动画的使用
帧动画在使用前需要定义动画,然后在想要动画的元素上调用
帧动画的定义
帧动画的定义使用@keyframes animation name{各阶段的属性值}
帧动画的定义方式有两种
- from{} to{}
@keyframes move{
from{
原始状态
}
to{
最终状态,表示动画结束后元素的个属性值
}
- 百分比
@keyframes move{
0%{
原始状态
}
xxx%{
中间状态
}
100%{
最终状态,表示动画结束后元素的个属性值
}
百分比和from{}to{}的比较
百分比可以定义不同阶段的元素的属性可以实现更多动画效果,可以人为决定某一属性的变化过程在整个动画的占比
from{}to{}只能定义起始和结束状态动画形态较少,缺乏灵活度
动画的使用
box {
width: 200px;
height: 200px;
background: greenyellow;
animation: move 2s 0s linear;
}
@keyframes move {
0% {
width: 200px;
}
100% {
width: 400px;
}
}
帧动画和过渡动画的比较
- 过渡动画需要触发动作,帧动画不需要触发动作
- 过度动画不能设置动画播放次数,帧动画可以设置播放次数
- 帧动画可以人为设置某一属性的变化在整个动画的占比,过渡动画不能设置
- 过渡动画没有帧动画灵活度高