Web - CSS3过渡与动画

过渡

基本使用

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