CSS3 过渡

CSS 过渡

• 过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

• 过渡动画： 是从一个状态渐渐的过渡到另外一个状态

• 可以让我们页面跟好看，更加动感十足，虽然低版本游览器不支持(ie9以下版本)但是不会影响到页面布局

• 我们现在经常和 :hover一起搭配使用

• 使用的口诀：谁做过渡给谁家，谁需要变化给谁加

• transition:要过渡的属性(空格)花费时间(空格)运动曲线(空格)何时开始;

  • 属性： 想要变化的CSS属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过度，下一个all就可以了
  • 花费时间： 单位是秒(必须写单位) 比如0.5
  • 运动曲线： 默认是ease(可以省略)
    
  • 何时开始： 单位是秒(必须写单位)可以设置延迟触发时间，默认为0s(可以省略)

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: #008484;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            transition: width .5s ease .5s;
        }

        div:hover {
            width: 300px;
        }
    </style>

• 上面我们把这张图片属性的宽度从100px加到了300px，花费的时间，何时开始都可以自己来控制
• 但是我们只是过渡了一个属性，但是当你想过渡多个属性呢，这时候并不需要再写一次这属性，而是在后面添加上一个逗号即可
• 如果想要多个属性都变化，属性写all就可以了

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: #008484;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            <!-- transition: width .5s ease .5s,height .5s ease .5s; -->
            transition: all .5s ease .5s;
        }

        div:hover {
            width: 300px;
            height: 200px;
        }
    </style>