css动画相关
- transition
#box{
height:200px;
width:200px;
background-color:black;
}
#box:hover{
transition:1s 1s height ease;
}
- 属性：
transition: durationTime delayTime attribute(height) mode(ease,liner,ease-in,ease-out,cubi-)
- animation
#box{
height:200px;
width:200px;
background-color:black;
animation: 1s 1s graduallyChangeColor infinite;
}
@keyframes graduallyChangeColor{
0% {background:white}
50% {background:grey}
100% {background:black}
}
- 属性：
animation: duration delay animationName direction(normal,alternate,reverse,alternate-reverse) mode(infinate,backwords(停留在开始帧),forwards(停留在结束帧),none(默认值),both(轮流使用forwards和backwards))
- 比较
transition要手动触发才能开始，animation可以自动触发
