2021-09-06------5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）
5.4 CSS3 过渡与动画（transition属性 @keyframs规则 animation属性）
过渡效果 ：transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。
动画效果：让一个元素通过animation属性来完成若干个状态之间的一个转换，利用@keyframes规则和animation属性。
过渡 transition属性
transition属性主要完成的效果是让当前的元素从一种状态过渡到另一种状态，发生两个状态之间的一个变化。
transition 将元素的某个属性或者某几个属性或者所有属性从“一个值”在指定的时间内过渡到“另一个值”。
transition属性的几个子属性（也可以把这几个子属性都写在transition属性里面）
（1）transition-property 作用于哪一个或者哪几个属性。可以带有属性的名字，如果作用于一个属性，就写这个属性的名字；作用于多个属性的话，就用逗号隔开；如果是所有属性，就用关键字all就可以了。
（2）transition-duration 变化的过程持续的时间。用秒或毫秒为单位表示
（3）transition-timing-function 过渡时使用的方法（函数）。有下面几个取值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡与动画</title>
<style>
div{
width: 100px;
height: 30px;
line-height: 30px;/* 文本垂直居中 */
border-radius: 5px;/* 圆角边框 */
color: #000;/* 文字的颜色（初始状态） */
background-color: silver;/* 背景的颜色（初始状态） */
transition: all 1s linear;/* 所有子属性都写在transition属性里面，针对所有的属性all，过渡时间一秒钟，过渡方式是匀速的变化。 */
}
div:hover{
color: white;/* 文字颜色变化（终止状态） */
background-color: red;/* 背景颜色变化（终止状态）一秒钟的时间从初始状态过渡到终止状态 */
}
</style>
</head>
<body>
<div>CSS动画</div>
</body>
</html>
效果
初始状态
终止状态（鼠标悬停到div上）
动画效果 @keyframs规则 和 animation属性
动画效果 上面的transition属性只能从一个状态到另一个状态，通过animation属性可以让一个元素完成若干个状态之间的一个转换，这就是动画，采用animation属性完成。涉及到@keyframs规则。动画效果分两步：
（1）定义动画：采用@keyframes规则，keyframes翻译出来即关键帧，动画效果就是通过很多幅图片，连续播放的时候利用人眼的视觉延迟，自动地将他们连接在一起就形成了一个动态的动画效果，每幅静态图片都称为是一个keyframes，所以这个规则定义出来的就是所有关键帧。
@keyframes 动画名{
定义动画的关键帧，每个关键帧在定义的时候都要有一个名字，这个名字通常用百分比来表示，0%是最开始的时候，100%是最后播放完的状态，中间的状态用具体的百分比来表示；关键帧的名字后面，用花括号{}括起来，就是当前帧的状态下某一个属性的取值。}
（2）调用规则：animation属性。
animation：动画名 播放时间 变化方式
animation属性的几个子属性（也可以把几个子属性都写在animation属性里面）
（1）animation-name：引用@keyframes动画的名称，利用@keyframes规则定义出来的动画名。
（2）animation-duration：动画完成时间
（3）transition-timing-function ：规定动画的速度曲线，默认是“ease”，和transition的取值是完全一样的
（4）transition-paly-state：running|paused；表示动画当前播放的状态，running表示当前动画正在播放，paused表示动画播放完成，比如我们可以设置鼠标悬停的时候播放动画，鼠标移出的时候停止播放。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡与动画</title>
<style>
div{
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;/* 文本垂直居中 */
border-radius: 5px;/* 圆角边框 */
color: #000;/* 文字的颜色（初始状态） */
background-color: silver;/* 背景的颜色（初始状态） */
}
div:hover{
animation: test 3s ease;
}
@keyframes test{
0% {color:#1cf;}
30% {color: #6cf;}
60% {color: #acf;}
100% {color: #fcf}
}
</style>
</head>
<body>
<div>CSS动画</div>
</body>
</html>
效果
开始
中间
播放结束
