CSS之animation和transition

CSS3已经火了很久了，它可以代替js实现一些复杂的动画，代码简单，性能好，面试css3经常是重点考点，本章内容主要归纳总结animation和transition的使用和区别。

1. Transition
2. Animation
3. 区别

Transition的使用

Transition过渡是元素从一种样式逐渐改变为另一种的效果。强调过渡，需要触发一个事件达到动画目的。

Transition的属性介绍：

属性	解释
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

使用：

要实现这一点，必须规定两项内容：

1. 指定要添加效果的CSS属性
2. 指定效果的持续时间。

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

div
{
	width:100px;
	height:100px;
	background:red;
	transition:width 1s linear 2s;
	/* Safari */
	-webkit-transition:width 1s linear 2s;
}

div:hover
{
	width:200px;
}

多项改变
要添加多个样式的变换效果，添加的属性由逗号分隔：

div
{
	transition: width 2s, height 2s, transform 2s...;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s...;
}

---

Animation的使用
Animation可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

Animation的属性介绍

@keyframes规则
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

在 @keyframes 创建动画，需要把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：

1. 规定动画的名称
2. 规定动画的时长

div{
	// 动画名称，动画时长
	animation: myAnimation 1s;
}

// @keyframes创建名为myAnimation的动画规则
@keyframes myAnimation{
 from{
	background: red;
 }
 to{
 	background: blue;
 }
}

注意: 必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数，请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，最好始终定义 0% 和 100% 选择器。

---

区别

animation	transition
不需要时间触发，多个关键帧，实现自由动画。由@keyframs控制当前帧属性，更灵活	强调过渡，需要触发一个事件达到动画目的

文献：
https://www.runoob.com/css3/css3-transitions.html