transtion-动画过渡

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property   规定设置过渡效果的 CSS 属性的名称。
• transition-duration    规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function  规定速度效果的速度曲线。

         

 

• transition-delay   定义过渡效果何时开始。

简写格式

transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>

过渡transition的这四个子属性只有<transition-duration>是必需值且不能为0。其中，<transition-duration>和<transition-delay>都是时间。当两个时间同时出现时，第一个是<transition-duration>，第二个是<transition-delay>；当只有一个时间时，它是<transition-duration>，而<transition-delay>为默认值0。

[注意]transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性

transition-property

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度: 
    [1]max-height min-height max-width min-width height width
    [2]border-width margin padding outline-width outline-offset
    [3]font-size line-height text-indent vertical-align  
    [4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient

触发方式

1. hover鼠标悬停 
2. active点击激活
3. focus获得焦点时
4. @media符合媒体查询时