过渡(Transition)

• 允许CSS的属性值在一定的时间区间内平滑地过渡
• 在鼠标点击，获得焦点，被点击或对元素的任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition-property属性

• 概念：检索或设置对象中的参与过渡的属性
• 语法：transition-property: none | all | property
• 参数：none(没有属性改变)，all(所有属性改变，默认值)，property(元素属性名)
• 补充：如果不写transition-property属性，表示所有的属性支持过渡

// 当鼠标离开的时候，transform属性参与过渡
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
// 当鼠标经过的时候，transform属性参与过渡
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}

transition-duration属性

• 概念：检索或设置对象过渡的持续时间
• 语法：transition-duration: time;
• 参数：规定完成过渡效果需要花费的时间(以秒或毫秒计)，默认值是0

// 省略兼容性处理
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;  // 鼠标离开的时候，设置过渡时间为2s
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;  // 鼠标进过的时候，设置过渡时间为2s
}

transition-timing-function属性

• 概念：检索或设置对象中过渡的动画类型
• 语法：transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out |
• 参数：
  linear => 线性过渡，均匀运动
  ease => 平滑过渡，结束比较生硬
  ease-in => 由慢到快，结束比较生硬
  ease-out => 由快到慢
  ease-in-out => 由慢到快再到慢，这种效果比较人性化

// 省略兼容性处理
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;  // 鼠标离开的时候，设置过渡效果为由慢到快再慢
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;  // 鼠标进过的时候，设置过渡效果为由慢到快再慢
}

transition-delay属性

• 概念：检索或设置对象延迟过渡的时间
• 语法：transition-delay: time;
• 参数：延迟时间，默认值是0

// 省略兼容性处理
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;  // 鼠标离开的时候，设置1s之后再开始过渡
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;  // 鼠标进过的时候，设置1s之后再开始过渡
}

transition属性

• 概念：复合属性，检索或设置对象变换时的过渡
• 语法：transition: property duration timing-function delay;

div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}