css3小结

Transition过渡

必不可少的一个参数是：秒数；

Transition是添加给需要有变动的元素的常态样式上，而不是该元素有hover等变动时。

div {

width: 200px;

height: 200px;

background-color: red;

transition:2s width, 2s height, transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

}

div:hover {

transform: rotate(360deg);旋转360度

width: 300px;

height: 300px;

background-color: green;

}

通过以上语句可实现在2s时间内完成宽度变300px高度变300px以及变背景的动画效果，过渡只对数值性的东西起作用，比如宽高颜色值等，而对于左右浮动这种没有数值考量的是不起作用的。

Transition的分体属性：

transition-property 要运动的样式 （all || [attr] || none）

transition-duration 运动时间

transition-delay 延迟时间

transition-timing-function过度效果的时间曲线

ease：（逐渐变慢）默认值

linear：（匀速）

ease-in：(加速)

ease-out：（减速）

ease-in-out：（先加速后减速）

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

贝塞尔曲线cubic-bezier

transition:6s cubic-bezier(0.400, -0.240, 0.755, 1.2);贝塞尔曲线规定了transition的变化速度轨迹，如题意思是：在运动初期会先向后缓冲然后加速前进，到达终点后冲出终点有再反弹回终点。