CSS3 transition 过度

一个元素在不同的状态之间进行平滑的交换

CSS3中使用transition属性实现过度效果

一个简单的例子：

img{
   background-image：url（"img/1.jpg"）；
}


img:hover{
  transform:rotate(180deg);          //2D转换：顺时针旋转180°
  background-color:green;             //背景颜色：绿色
}
这样的话鼠标悬停 图片会立马旋转180°  背景颜色也会立刻显示，没有任何过度效果

如果我们给img元素添加以下代码

img{
  transition：2s；     //过度：2s内完成
}

那么整个图片旋转的时候会显得很完美、平滑

语法：

　　transition：过度属性 执行时间 时间函数 延迟时间；

　　　　　　过度属性：可选值。指定将要进行过度变换的Css属性   

　　　　　　　　（如：tansition：tansform 2s）多个属性过度效果 （tansition：tansform 0.2s,background 2s）也可是使用all 默认值

　　　　　　执行时间：可选值。默认值是0 指定过度效果从执行到结束使用的时间

　　　　　　时间函数：可选值 设置元素运动的速度 

　　　　　　　　　　贝塞尔曲线关键字：默认值ease　　linear　　ease-in　　ease-out　　ease-in-out　　cubic-bezier（）；　　　　

　　　　　　延迟时间：可选值。设置多长时间后开始执行过度。默认值是0；

 

转载于:https://www.cnblogs.com/xiaowie/p/9881726.html