CSS3过渡 transition

CSS3过渡

• 添加某种效果可以从一种样式转变到另一个的样式。transition: width 2s, height 2s;
1. 指定要添加效果的CSS属性
2. 指定效果的持续时间
• 过渡属性
• transition  简写属性，用于在一个属性中设置四个过渡属性
• transition-property  规定应用过渡的 CSS 属性的名称 transition-property：all ;
• transition-duration  定义过渡效果花费的时间。默认是 0
• transition-timing-function  规定过渡效果的时间曲线。默认是 "ease"   cubic-bezier(0,1.95,.83,.67)贝塞尔曲线
• transition-delay  规定过渡效果何时开始。默认是 0

div{
             100px;
            height: 100px;
            background: red;
            /* 设置过渡css的属性 */
            transition-property: all;
            /* 过渡延迟时间 */
            transition-delay: 2s;
            /* 完成过渡需要花费的总时间 */
            transition-duration: 4s;
            /* 过渡动画的运动方式  贝塞尔曲线*/
            transition-timing-function: cubic-bezier(0,1.95,.83,.67)
             /* transition-timing-function:ease; */
        }
        div:hover{
             200px;
            height: 200px;
            background: greenyellow;
        }