1 缓动 transition
1 transition：property duration timing-function delay；
简写属性，用于在一个属性中设置四个过渡属性。
2 transition-property
规定应用过渡的 CSS 属性的名称。 width ，height...
3 transition-duration
定义过渡效果花费的时间。默认是 0。
4 transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。
5 transition-delay
规定过渡效果何时开始。默认是 0。
transition-delay: 2s; //等待2秒前切换效果开始
例
.box{
width: 200px;
height: 200px;
background-color: #666;
transition : border-radius 2s ease-in-out 1s
}
.box:hover{
border-radius:50%;
}
一个宽高为200px的盒子，当鼠标悬停时 1s后 正方形开始根据ease-in-out变成圆形 2s完成转换
例
.box{
width: 200px;
height: 200px;
background-color: #666;
transition : border-radius 2s,height 2s,width 2s, ease-in-out 2s
}
.box:hover{
border-radius:50%;
height: 100px;
width: 100px;
}
transition : border-radius 2s,height 2s,width 2s, ease-in-out 2s
圆角 高 宽 一起变化
2 动画 animation
animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1 animation-name 指定要绑定到选择器的关键帧的名称
2 animation-duration 动画指定需要多少秒或毫秒完成
3 animation-timing-function 设置动画将如何完成一个周期
4 animation-delay 设置动画在启动前的延迟间隔。
5 animation-iteration-count 定义动画的播放次数。
6 animation-direction 指定是否应该轮流反向播放动画。
7 animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
8 animation-play-state 指定动画是否正在运行或已暂停。
keyframes
@keyframes animationname {keyframes-selector {css-styles;}}
1 animationname 必需的。定义animation的名称。
2 keyframes-selector 必需的。动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。
例
.box1 {
width: 200px;
height: 200px;
background-color: #666;
animation: ani1 2s
}
.box2 {
width: 200px;
height: 200px;
background-color: #666;
animation: ani2 2s
}
@keyframes ani1 {
from {
width: 200px;
height: 200px;
border-radius: 0;
}
to {
width: 100px;
height: 100px;
border-radius: 50%;
}
}
@keyframes ani2{
0%{
width: 200px;
height: 200px;
border-radius: 0;
}
50%{
width: 200px;
height: 200px;
border-radius: 50%;
}
100%{
width: 100px;
height: 100px;
border-radius: 50%;
}
}
