CSS3的Transition属性使用的示例代码
Admin 2021-04-09 群英技术资� 223 次浏�
CSS3中Transition,是一个用于动画过度的熟悉,很多刚接触CSS新手对于Transition属性不是很了解,这篇文章就主要介绍Transition属性的使用以及示例�
1、transition-property的语�
[css]
transition-property :all(所有属性改�) || [attr] (指定要运动的样式)|| none(没有属性改�)
2、transition-property的属性�
(1)none:transition马上停止执行
(2)all:元素产生任何属性值变化时都将执行transition效果
(3)attr:指定要运动的样�
一、transition-property――指定要运动的样�
1、transition-property的语�
[css]
transition-property :all(所有属性改�) || [attr] (指定要运动的样式)|| none(没有属性改�)
2、transition-property的属性�
(1)none:transition马上停止执行
(2)all:元素产生任何属性值变化时都将执行transition效果
(3)attr:指定要运动的样�
二、transition-duration
transition-duration是指定元素转换过程的持续时间,单位为�(s)。transition-duration可以作用于所有元素,包括:before�:after
伪元素。其默认值是0,也就是变换时是即时的�
三、transition-delay―� 延迟时间
transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,单位为s(�)
,其使用和transition-duration极其相似,也可以作用于所有元素,包括:before�:after伪元素� 默认大小�"0",也就是变换立即执行�
没有延迟�
四、transition-timing-function――指定运动形�
transition-timing-function � ease(逐渐变慢) | linear(匀�) | ease-in(加�) | ease-out(减�) | ease-in-out(先加速然后减
�) | cubic-bezier(该值允许你去自定义一个时间曲�)(number, number, number, number>)
五、transition的综合写�
[css]
元素选择器{transition:运动的样� 持续时间 运动形式 延迟时间;}
六、transition的综合兼容写�
1、Mozilla内核
[css]
元素选择器{-moz-transition:运动的样� 持续时间 运动形式 延迟时间;}
2、Webkit内核
[css]
元素选择器{-webkit-transition:运动的样� 持续时间 运动形式 延迟时间;}
3、Opera内核
[css]
元素选择器{-o-transition:运动的样� 持续时间 运动形式 延迟时间;}
4、W3C 标准
[css]
元素选择器{transition:运动的样� 持续时间 运动形式 延迟时间;}
实例效果�
代码如下: 以上就是关于css3中transition属性的介绍,本文有详细的代码供大家参考,希望对大家学习CSS3有帮助�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
css中如何实现平均布局?在实际的项目中,我们可能会遇到实现平均布局的需求,那么这个效果怎样做呢?我们可以使用负margin的方法来实现,接下来我们一起来看一个实现示例�
这篇文章主要介绍了css实现六边形图片的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章主要介绍了Scss编译输出风格整理的相关资料,Scss提供�4种风格输出CSS,以满足更多人的需求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文主要给大家讲述了有关于CSS之弹性布局内容对齐内容,内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐�
一、段落样式css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等。它们的具体语法如下:line-height:normal|lengthtext-indent:lengthtext-align:left|right|center|justifyletter-spacing:normal|l
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078