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动画属性用法详解

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

HTML / CSS 相关文章推荐
CSS3中文字镂空、透明值、阴影效果设置示例小结
Mar 07 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 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
You might like
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
js脚本实现数据去重
2014/11/27 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
使用JavaScript破解web
2018/09/28 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
聊聊Python中的pypy
2018/01/12 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
关于Python错误重试方法总结
2021/01/03 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
高中生毕业自我鉴定
2013/10/10 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
趣味运动会广播稿
2014/09/13 职场文书
工会工作个人总结
2015/03/03 职场文书
匿名信格式范文
2015/05/27 职场文书
高中数学课堂教学反思
2016/02/18 职场文书