css3-transition
让我们回顾一下animation的知识点
animation 属性是一个简写属性，用于设置六个动画属性：
| 属性 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的 keyframe 名称 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计时 |
| animation-timing-functio | 规定动画的速度曲线 |
| animation-delay | 规定在动画开始之前的延迟 |
| animation-iteration-count | 规定动画应该播放的次数 |
| animation-direction | 规定是否应该轮流反向播放动画 |
animation-timing-function规定动画的速度曲线
| 属性 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢cubic-bezier(0.25,0.1,0.25,1) |
| ease-in | 动画以低速开始。cubic-bezier(0.42,0,1,1) |
| ease-out | 动画以低速结束。cubic-bezier(0,0,0.58,1) |
| ease-in-out | 动画以低速开始和结束。cubic-bezier(0.42,0,0.58,1) |
animation-direction规定是否应该轮流反向播放动画。
| 属性 | 描述 |
|---|---|
| normal | 默认值。动画每次循环都是向前（即按顺序）播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效） |
这里附上animation的案例：
在codepen上尝试:
https://codepen.io/neverloseyourway/pen/wVGQKG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
display: flex;
align-items: center;
justify-content: center;
}
.heart{
animation: beat 0.5s infinite alternate;
position: relative;
width:150px;
height: 150px;
background-color: red;
transform: rotate(45deg);
top:100px;
/*下面的动画分段也要都旋转45度*/
/*box-shadow: 0 0 5px 5px red;*/
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
}
.heart:before,.heart:after{
content: '';
border-radius: 50%;
position: absolute;
width: 150px;
height: 150px;
background-color: red;
}
/*主体被旋转时里面的圆也会旋转，相对位移的方向也被旋转了*/
.heart:before{
left: -75px;
}
.heart:after{
top:-75px;
}
@keyframes beat{
0%{
transform: scale(0.8,0.8) rotate(45deg);
}
50%{
transform: scale(1,1) rotate(45deg);
}
0%{
transform: scale(0.8,0.8) rotate(45deg);
}
}
</style>
</head>
<body>
<div class="heart">
</div>
</body>
</html>
到这里只是前情回顾，我们继续往下：
transition动画过渡
容易混淆的translate,transition,transform到底是什么关系？
CSS3中的transform(变形)属性用于内联元素和块级元素，它的属性值有以下五个：
- 旋转rotate
- 扭曲skew
- scale缩放
- 移动translate
- 矩阵变形matrix
可以看出：transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；
而我们要重点讲的transition动画过渡可以使用transfrom来完成的，增加过渡效果的多样性。
transtion属性
transition 属性是一个简写属性，用于设置四个过渡属性：
默认:all 0 ease 0
| 属性 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称 |
| transition-duratio | 规定完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 规定速度效果的速度曲线 |
| transition-delay | 定义过渡效果何时开 |
触发方式：伪类触发：:hover : focus :checked :active
为了让你更好理解，请尝试以下代码：
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: slateblue;
border: aquamarine 3px solid;
transition:background-color 2s ease;
}
.box1:hover{
background-color: deepskyblue;
}
</style>
在codepen上尝试:https://codepen.io/neverloseyourway/pen/YzzQOoE
可以看到，我们指定背景颜色这个属性发生过渡，持续时间为2s。使用hover触发的时候，将背景颜色的属性值重新赋值。
transition中使用transform,修改上面的一行代码transition:background-color 2s ease,transform 2s ease-in 1s;
.box1{
width: 100px;
height: 100px;
background-color: slateblue;
border: aquamarine 3px solid;
/* transition:background-color 2s ease; */
transition:background-color 2s ease,transform 2s ease-in 1s;
}
.box1:hover{
transform: rotate(180deg) scale(.5,.5);
background-color: deepskyblue;
}
在codepen上尝试:https://codepen.io/neverloseyourway/pen/vYYZVBd
animation和transition有什么区别？
相信看完这边文章，说起动画，你就会想起使用animation和transition这两个css属性来达到想要的动画效果。
区别：
| CSS3 | 差异 |
|---|---|
| transition 特性1 | 在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画 |
| transition 特性2 | 常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发 |
| transition 特性3 | 需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发 |
| transition 特性4 | 只能定义开始状态和结束状态，不能定义中间状态 |
| animation特性1 | 可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数 |
| animation特性2 | 网页加载时会直接执行，可以自行控制各阶段动画的变化 |