CSS3帧动画与过渡动画的比较

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{各阶段的属性值}

帧动画的定义方式有两种

1. from{} to{}

@keyframes move{
     
from{
     
	原始状态
}
to{
     
	最终状态，表示动画结束后元素的个属性值
}

2. 百分比

@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;
            }
        }

帧动画和过渡动画的比较

1. 过渡动画需要触发动作，帧动画不需要触发动作
2. 过度动画不能设置动画播放次数，帧动画可以设置播放次数
3. 帧动画可以人为设置某一属性的变化在整个动画的占比，过渡动画不能设置
4. 过渡动画没有帧动画灵活度高