css3的transition属性详解
发布时间:2014-12-15 15:35:17 作者:佚名 我要评论
这篇文章主要介绍了css3的transition属性详解,需要的朋友可以参考下
transition是将某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画效果.
这个属性一般搭配:hover来使
下面看一个例子:鼠标放在div上,0.2s后将div元素的背景色用一秒的时间变成黄色,变化方式是linear
复制代码
代码如下:div{ background-color:red; transition:background-color 1s linear 0.2s;}
div:hover{ background-color:yellow;}
<div>思思博士</div>
鼠标没放上去之前:
鼠标放上去0.2s后 的变化过程:
鼠标放上去的最终效果:
看到这里 大家对与这个属性的用法,心里面应该有了底了.
对于这个属性,每个参数都有一个对应的属性名,也就是说这个属性是可以拆开写的.
非简写形式:
复制代码
代码如下:/*div{ background-color:red; transition:background-color 1s linear 0.2s;}*/
div{background-color:red; transition-property:background-color; transition-duration:1s; transition-timing-function:linear; transition-delay:0.2s}
div:hover{ background-color:yellow;}
transition还可以过渡多个效果.
复制代码
代码如下:div{ background-color:red; color:black; height:50px; transition:background-color 1s linear,color 1s linear,height 1s linear;}
div:hover{ background-color:yellow; color:#F00; height:100px;}
相关文章
css动画属性使用及实例代码(transition/transform/animation)
这篇文章主要介绍了css动画属性使用及实例代码(transition/transform/animation) ,需要的朋友可以参考下2019-05-09使用css transition属性实现一个带动画显隐的微信小程序部件
这篇文章主要介绍了使用css transition属性实现一个带动画显隐的微信小程序部件的相关资料,需要的朋友可以参考下2018-06-13- CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果,需要的朋友参考下本文2018-04-18
- 大家都知道过渡动画是动画的基础,在学习动画属性之前,我们需要先了解过渡属性transition,下面这篇文章通过示例代码给大家详细介绍了CSS3中的元素过渡属性transition,有2016-11-30
- W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中2014-09-02
- 这篇文章主要介绍了css简单动画之transition属性详解,需要的朋友可以参考下2019-09-17
最新评论