CSS transition animation的使用(内含贝赛尔曲线详解)(2)

一、transition (过渡动画) 

属性 描述 CSS

transition

简写属性,用于在一个属性中设置四个过渡属性。 3

transition-property

规定应用过渡的 CSS 属性的名称。 3

transition-duration

定义过渡效果花费的时间。默认是 0。 3

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。 3

transition-delay

规定过渡效果何时开始。默认是 0。 3

实例: 

<!DOCTYPE html>
<html>
<head>
<style> 
div{
    width:100px;
    height:100px;
    background:yellow;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:cubic-bezier(0,0,1,1);
    transition-delay:0s;
}
div:hover{
    width:500px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
<p><b>注释:</b>这个过渡效果会在开始之前等待两秒。</p>
</body>
</html>

效果如下

transition简化属性写法:
transition: property duration timing-function delay;

默认值是transition:all 0 ease 0;

注意事项

在移动开发中直接使用transition动画会让页面变得非常卡顿(亲测),所以我们常用transform:translate3D(0,0,0)或者transform:translateZ(0)来开启移动端动画的gpu加速,使动画过程更流畅。
translate3D(0,0,0)是指电仪3D转换
translateZ(0)是指定义3D转换,只用Z轴