CSS3过渡
特点
(1)本质上是一帧动画,一帧结束后,就没有然后了
(2)过渡的效果的实现,必须通过用户的行为,可能触发的行为:hover 、focus、click。或者通过JS代码
1、 transition的属性
transition-property:指定元素的过渡属性
transition-duration:规定了过渡的时间
transition-timming-function:规定以何种方式过渡
ease:表示的是快速的:默认值
ease-in:先慢后快
ease-out:先快后慢
linear:表示的是线性平缓的变化
steps(X):表示的是过渡分几步完成,X只能为正数
2、缩写
transition: property duration function depay
transition :指定过渡的属性 过渡的时间 过渡的方式 过渡的延迟
3、触发过渡
只有当用户触发事件,过渡事件才能进行,比如用户点击、鼠标移入移除等等,这是他的一个局限性
4、局限性
<style>
#box{
height: 100px;
width: 100px;
background:skyblue;
position: absolute;
left:0;
transition-property: left width;
transition-duration: 2s;
}
body:hover #box{
left: 800px;
width: 200px;
}
body{
height: 500px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>