首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3中Transition动画属性用法详解

Posted in HTML / CSS onJuly 04, 2016

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的用法

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>transition演示1</title>  
  6.     <style type="text/css">  
  7.         .animated_div {   
  8.             margin: 100px auto;   
  9.             width:100px;   
  10.             height:60px;   
  11.             background:#92B901;   
  12.             /*简写属性*/   
  13.             -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */   
  14.             /*每个属性分开写*/   
  15.             transition-property:width,height,transform,background,opacity;   
  16.             transition-duration:1s,1s,1s,1s,1s,1s;   
  17.             -webkit-border-radius:5px;   
  18.             border-radius:5px;   
  19.             opacity:0.4;   
  20.         }   
  21.         .animated_div:hover {   
  22.             -moz-transform: rotate(360deg);   
  23.             -webkit-transform: rotate(360deg);   
  24.             -o-transform: rotate(360deg);   
  25.             transform: rotate(360deg);   
  26.             opacity:1;   
  27.             background:#1ec7e6;   
  28.             width:200px;   
  29.             height:120px;   
  30.         }   
  31.     </style>  
  32. </head>  
  33. <body>  
  34. <div class="animated_div"></div>  
  35. </body>  
  36. </html>  

上述代码当鼠标移到div上时，CSS属性：width,height,transform,background,opacity都发生渐变过渡效果。最终css样式变成.animated_div里定义的样式，过渡过程大致如下：

CSS3中Transition动画属性用法详解

再给一个网上的嫦娥奔月的示例，要求：当鼠标移到图片上时，嫦娥出现，移开时嫦娥消失

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>transition演示2</title>  
  6.     <style type="text/css">  
  7.         body{   
  8.           color: #fff;   
  9.           background:#000;   
  10.         }   
  11.         .change{   
  12.           display:block;   
  13.           width:400px;   
  14.           height:400px;   
  15.           background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;   
  16.           background-size:cover;   
  17.           border:1em solid rgba(255,255,255,.8);   
  18.           margin:50px auto;   
  19.         }   
  20.         .change img{   
  21.           display:block;   
  22.           width:300px;   
  23.           height:284px;   
  24.           opacity:0;   
  25.           -webkit-transform:translate(-100px,-100px);   
  26.           transform:translate(-100px,-100px);   
  27.           -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;   
  28.           transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;   
  29.         }   
  30.         .change:hover img{   
  31.           -webkit-transform:translate(0px,0px);   
  32.           transform:translate(0px,0px);   
  33.           opacity:1;   
  34.         }   
  35.     </style>  
  36. </head>  
  37. <body>  
  38.     <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">  
  39.         <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />  
  40.     </a>  
  41. </body>  
  42. </html>  

为了使嫦娥有飘入飘出的效果，设置了transform属性，配合opacity属性，加入过渡效果就能达到效果：

CSS3中Transition动画属性用法详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3中Transition动画属性用法详解

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 渐变（Gradients）之CSS3 线性渐变
Jul 08 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 #HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 #HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 #HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 #HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 #HTML / CSS
老生常谈CSS中的长度单位
Jun 27 #HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 #HTML / CSS
肯尼亚购物网站(2) 意大利购物网站(128) 阿根廷购物网站(9) 台湾购物网站(77) 挪威购物网站(7) 比利时购物网站(33) 瑞典购物网站(55) 丹麦购物网站(22) 澳大利亚购物网站(309) 法国购物网站(144)
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP strtok()函数的优点分析
2010/03/02 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
IE的有条件注释判定IE版本详解（附实例代码）
2012/01/04 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python对象及面向对象技术详解
2016/07/19 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python中six模块基础用法
2019/12/08 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
Oakley西班牙官方商店：太阳眼镜和男女运动服
2019/04/26 全球购物
Perfume’s Club美国官网：西班牙第一家在线美容店
2020/06/10 全球购物
小区门卫管理制度
2014/01/29 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
创业计划书之物流运送
2019/09/17 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis
部分武汉产收音机展览
2022/04/07 无线电