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 }