过渡
基本使用
transition过渡属性是css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加补间动画。
过渡从kIE10开始兼容，移动端兼容良好，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为css3过渡。
transition属性有4个要素：过渡属性、动画时长、变化速度曲线、延迟时间，需要注意的是时间单位后面的s是不能省略的。
所有数值类型的属性，都可以参与过渡，比如：width、height、left、top、border-radius
.box1 {width: 200px;height: 200px;background-color: orange;transition: width 5s linear 0s;margin-bottom: 10px;
}.box1:hover {width: 800px;
}
背景颜色和文字颜色都可以被过渡。
.box2:hover p {left: 1000px;
}.box3 {width: 200px;height: 200px;background-color: red;transition: background-color 1s linear 0s;margin-bottom: 10px;
}.box3:hover {background-color: green;
}
所有的变形(包括2D和3D)都能被过渡。
/**2D过渡*/
.box5 {width: 200px;height: 200px;background-color: orange;margin-bottom: 10px;transition: transform 1s linear 0s;
}.box5:hover {transform: scale(1.2) rotate(360deg);
}/**3D过渡*/
.box6 {perspective: 300px;width: 200px;height: 200px;border: 1px solid #000;margin-bottom: 10px;
}.box6 p {width: 200px;height: 200px;background-color: orange;transition: transform 1s linear 0s;
}.box6:hover p {transform: rotateX(360deg) rotateY(360deg);
}
如果要所有的属性都参数过渡，可以写all。
.box7 {width: 200px;height: 200px;background-color: orange;border-radius: 0;transition: all 1s linear 0s;
}
.box7:hover {width: 400px;height: 160px;background-color: green;border-radius: 50%;
}
过渡的四个小属性：
| 属性 | 意义 |
|---|---|
| transition-property | 那些属性要过渡 |
| transition-duration | 动画时间 |
| transition-timing-function | 动画变化曲线(缓动效果) |
| transition-delay | 延迟时间 |
缓动效果
transition的第三个参数就是缓动参数，也是变化速度曲线，常用的缓动参数：
1、linear
线性过渡，元素在过渡过程中以恒定的速度变化，没有加速或减速效果。
2、ease
默认的缓动函数，过渡开始时较慢，然后加速，最后再减速。这是一种自然的过渡效果，常用于大多数场景。
3、ease-in
过渡开始时较慢，然后逐渐加速，结束时速度最快。常用于强调进入效果。
4、ease-out
过渡开始时速度最快，然后逐渐减速，结束时最慢。常用于强调退出效果。
5、ease-in-out
过渡开始和结束时较慢，中间加速。是 ease 函数的更明显版本。
6、cubic-bezier
自定义贝塞尔曲线缓动函数。该函数接受四个参数，分别是贝塞尔曲线的两个控制点的 x 和 y 坐标，取值范围在 0 到 1 之间。
可以去网站https://cubic-bezier.com可以生成内赛尔曲线，可以自定义动画缓动参数。
.box {width: 100px;height: 100px;background-color: red;transition: width 2s cubic-bezier(0.42, 0, 0.58, 1);
}.box:hover {width: 200px;
}
7、steps()
.box {width: 100px;height: 100px;background-color: red;transition: width 2s steps(5, end);
}.box:hover {width: 200px;
}
动画
可以使用@keyframes来定义动画，keyframes表示关键帧，在项目上线前，要补上@-webkit-这样的私有前缀。
from表示起始状态,to表示结束状态。
@keyframes movelr {from {transform: translateX(0);}to {transform: translateX(1000px);}
}
定义动画之后，就可以使用animation属性调用动画，animation参数的属性依次是：动画名字、总时长、缓动效果、延迟。
animation第五个参数就是动画的执行次数，如果想永远执行可以写infinite。
/**movelr 是定义的动画名称*/
.box2 {width: 200px;height: 200px;background-color: blue;animation: movelr 2s linear 0s infinite alternate;
}
如果想让动画的第2、4、6…偶数次自动逆行执行，那么要加上alternate参数即可。
.box2 {width: 200px;height: 200px;background-color: blue;animation: movelr 2s linear 0s infinite alternate;
}
如果想让动画停止在最后结束状态，那么要加上forwards。
.box3 {width: 200px;height: 200px;background-color: green;animation: changeToCircle 1s linear 0s forwards ;
}
多关键帧动画实例如下：
.box4 {width: 200px;height: 200px;background-color: red;animation: changeColor 3s linear 0s alternate infinite;
}@keyframes changeColor {0% {background-color: red;}20% {background-color: yellow;}40% {background-color: blue;}60% {background-color: green;}80% {background-color: purple;}100% {background-color: orange;}
}
