CSS3中Transition动画属性用法详解
W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”
transition属性的值包括以下四个:
•transition-property: 指定对HTML元素的哪个css属性进行过渡渐变处理,这个属性可以是color、width、height等各种标准的css属性。
•transition-duration:指定属性过渡的持续时间
•transition-timing-function:指定渐变的速度:
1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。
•transition-delay:指定延迟时间,也就是经过多长时间才开始执行过渡过程。
浏览器兼容性
Internet Explorer 9 以及更早的版本,不支持 transition 属性。
Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 属性。Chrome 25 以及更早的版本以及Safari 需要前缀 -webkit-。
下面还是以实例来说明transition的用法
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>transition演示1</title>
- <style type="text/css">
- .animated_div {
- margin: 100px auto;
- width:100px;
- height:60px;
- background:#92B901;
- /*简写属性*/
- -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
- /*每个属性分开写*/
- transition-property:width,height,transform,background,opacity;
- transition-duration:1s,1s,1s,1s,1s,1s;
- -webkit-border-radius:5px;
- border-radius:5px;
- opacity:0.4;
- }
- .animated_div:hover {
- -moz-transform: rotate(360deg);
- -webkit-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- opacity:1;
- background:#1ec7e6;
- width:200px;
- height:120px;
- }
- </style>
- </head>
- <body>
- <div class="animated_div"></div>
- </body>
- </html>
上述代码当鼠标移到div上时,CSS属性:width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式,过渡过程大致如下:
再给一个网上的嫦娥奔月的示例,要求:当鼠标移到图片上时,嫦娥出现,移开时嫦娥消失
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>transition演示2</title>
- <style type="text/css">
- body{
- color: #fff;
- background:#000;
- }
- .change{
- display:block;
- width:400px;
- height:400px;
- background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;
- background-size:cover;
- border:1em solid rgba(255,255,255,.8);
- margin:50px auto;
- }
- .change img{
- display:block;
- width:300px;
- height:284px;
- opacity:0;
- -webkit-transform:translate(-100px,-100px);
- transform:translate(-100px,-100px);
- -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
- transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
- }
- .change:hover img{
- -webkit-transform:translate(0px,0px);
- transform:translate(0px,0px);
- opacity:1;
- }
- </style>
- </head>
- <body>
- <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
- <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
- </a>
- </body>
- </html>
为了使嫦娥有飘入飘出的效果,设置了transform属性,配合opacity属性,加入过渡效果就能达到效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要为大家详细介绍了CSS3中Transform动画属性用法,教大家如何实现2D transform变换、3D transform变换,感兴趣的小伙伴们可以参考一下2016-07-04
- 这篇文章主要为大家详细介绍了CSS3中Animation动画属性用法,教大家如何使用animation动画,感兴趣的小伙伴们可以参考一下2016-07-04
CSS3中的Transition过度与Animation动画属性使用要点
这篇文章主要介绍了CSS3中的Transition过度与Animation动画属性使用要点Transition和Animation能被用来制作基本的页面图片动态效果,当然进一步的控制还是需要JavaScript的2016-05-20- 下面小编就为大家带来一篇深入理解css属性的选择对动画性能的影响。小编觉得挺不错的,现在分享给大家,也给大家做个参考2016-04-20
jQuery利用CSS3的keyframes属性实现飞翔的小鸟动画特效
jQuery利用CSS3的keyframes属性实现飞翔的小鸟动画特效是一款利用css3的keyframes属性制作的飞翔的小鸟动画特效。小鸟飞翔速度有快有慢,效果非常逼真,对本段代码感兴趣的2016-02-14- CSS3实现僵尸行Sprite动画特效源码是一款使用animation动画的steps属性制作的僵尸行走CSS3 Sprite动画特效的代码,形成僵尸走路的动画效果2015-12-10
css动画属性使用及实例代码(transition/transform/animation)
这篇文章主要介绍了css动画属性使用及实例代码(transition/transform/animation) ,需要的朋友可以参考下2019-05-09
最新评论