CSS 过渡模块

 /*告诉系统哪个属性需要执行过渡效果*/
            transition-property: width, background-color;
            /*告诉系统过渡效果持续的时长*/
            transition-duration: 5s, 5s;



/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
        div:hover{
            width: 300px;
            background-color: blue;
        }



/*1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;*/



/*告诉系统过渡动画的运动的速度*/
            transition-timing-function: linear;
             transition-timing-function: ease;
            ransition-timing-function: ease-in;等


/*告诉系统延迟多少秒之后才开始过渡动画*/
            transition-delay: 2s;



/*如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为*/
transition:all 0s;