CSS3过渡 transition

CSS3过渡

添加某种效果可以从一种样式转变到另一个的样式。transition: width 2s, height 2s;

指定要添加效果的CSS属性
指定效果的持续时间

过渡属性

transition 简写属性，用于在一个属性中设置四个过渡属性
transition-property 规定应用过渡的 CSS 属性的名称 transition-property：all ;
transition-duration 定义过渡效果花费的时间。默认是 0
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease" cubic-bezier(0,1.95,.83,.67)贝塞尔曲线
transition-delay 规定过渡效果何时开始。默认是 0

 1 div{
 2              100px;
 3             height: 100px;
 4             background: red;
 5             /* 设置过渡css的属性 */
 6             transition-property: all;
 7             /* 过渡延迟时间 */
 8             transition-delay: 2s;
 9             /* 完成过渡需要花费的总时间 */
10             transition-duration: 4s;
11             /* 过渡动画的运动方式  贝塞尔曲线*/
12             transition-timing-function: cubic-bezier(0,1.95,.83,.67)
13              /* transition-timing-function:ease; */
14         }
15         div:hover{
16              200px;
17             height: 200px;
18             background: greenyellow;
19         }