web——css样式——动画效果（1）

过度动画效果

过渡动画样式用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;
} 

样式效果 

 

过度动画样式示例