过度动画效果
过渡动画样式用transition来表示,以下是过度动画的属性:
transition-property: 设置过度动画的变形属性 all监听所有属性的变化
transition-duration: 设置过度动画的持续时间
transition-timing-function: 设置过度动画变换函数;
linear(匀速),ease(由慢到快,达到最快的时候由快到慢) ease-in(由慢到快)
ease-out(由快到慢),ease-in-out(由快到慢,到达最慢的时候由慢到快)
transition-delay: 设置过度动画延迟时间
div {
height: 100px;
background: red;
transition-property: width, height;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 1s;
/*transition: width 3s linear 1s, height 3s linear 1s;组合样式 */
/*transition: all 3s linear 1s;*/
}
div:hover {
height: 200px;
width: 200px;
background: greenyellow;
}
样式效果
过度动画样式示例