CSS3中的Transition过度与Animation动画属性使用要点


Posted in HTML / CSS onMay 20, 2016

Transition(过度)
Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下:

CSS Code复制内容到剪贴板
  1. transition: property duration timing-function delay;   
  2. /*  
  3. property:执行过渡的属性  
  4. duration:执行过渡的持续时间  
  5. timing-function:执行过渡的速率模式  
  6. delay:延时多久执行  
  7. */  

transition-property
可取值:

none
没有属性会获得过渡效果。
all
所有属性都将获得过渡效果。
property
定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

CSS Code复制内容到剪贴板
  1. div{   
  2. transition-property:width;   
  3. -moz-transition-property: width;/* Firefox 4 */  
  4. -webkit-transition-property:width/* Safari 和 Chrome */  
  5. -o-transition-property:width;    
  6. /* Opera */}  

transition-duration
参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,回想一下如果只有transform属性,是不是变换啪地一下完成了。

CSS Code复制内容到剪贴板
  1. div{   
  2. transition-duration: 5s;   
  3. -moz-transition-duration: 5s; /* Firefox 4 */  
  4. -webkit-transition-duration: 5s; /* Safari 和 Chrome */  
  5. -o-transition-duration: 5s; /* Opera */}   

transition-timing-function

既然是动画,那么就有动画的运行速率,不同的速度会产生不同的结果,以下是可取值。

ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
CSS3中的Transition过度与Animation动画属性使用要点

transition-delay
参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,也就是立即执行,如果在多个动画直接有先后顺序,那么它就会派上用场。

Animation(动画)
关键帧 Keyframe
实现自定义动画,通过对关键帧的设定来实现,也就是规定从起始点(0%)到终点(100%)之间的具体节点上的动画样式。就好比一个人起床,睁开眼睛(0%),站起来(10%),穿上衣(40%),穿裤子(80%),整理面容(100%),这样子把每个节点串起来便是动画了。

再说动画
动画,关键在于动字,那么对于页面上的元素来说,能发生变化的便是它的样式属性,比如用animation规定自定义动画,内容为font-size从18px,变为28px,这个便是动,加上其自身的属性(它可以规定动画持续时间,运动形式等等),便可以呈现动态的效果,而不是一瞬间的变化。

通常,transition要想实现动画通常需要由hover伪类来触发,否则在页面加载的时候它已经运动完毕,保持运动的末态,这并不是我们想要的。animation不一样,它拥有更多的表现形式,使其看起来像与生俱来,天生就会动一样。

语法

CSS Code复制内容到剪贴板
  1. .area{   
  2.      width50px;   
  3.      height50px;   
  4.      margin-left100px;   
  5.      backgroundblue;   
  6.      -webkit-animation-name:'demo';/*动画属性名,也就是我们前面keyframes定义的动画名*/  
  7.      -webkit-animation-duration: 10s;/*动画持续时间*/  
  8.      -webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/  
  9.      -webkit-animation-delay: 2s;/*动画延迟时间*/  
  10.      -webkit-animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/  
  11.      -webkit-animation-direction: alternate;/*定义动画方式*/  
  12.   }  

实例和简写
需要注意的是最后一个属性,direction,我们可以这么想,A从甲地到了乙地这是一个动画,设置为normal时,第二次播放时便又是从头开始,显得很突兀,这个时候需要用alternate,使其看起来A在甲乙两地之间来回运动,代码如下:

CSS Code复制内容到剪贴板
  1. /*  
  2. 甲地和乙地这两个球都是absolutely定位方式,小球也是,只要控制left值即可  
  3. */  
  4. .circle{   
  5. //我给这个小球球增加了一个名为demo1的动画   
  6. //你看,它就自己动起来了,回想一下,使用transform的时候,是不是还得用hover去触发   
  7.  -webkit-animation: 'demo1' 2s linear infinite alternate;   
  8.     -o-animation: 'demo1' 2s linear infinite alternate;   
  9.     animation: 'demo1' 2s linear infinite alternate;   
  10. }   
  11. //定义动画部分   
  12. //我只写了-webkit,真实中加上@-0-,@-moz-,@keyframes   
  13. @-webkit-keyframes demo1 {   
  14.     from {    
  15.         left:200px;   
  16.         background-color: lightcoral;   
  17.      }   
  18.      50%{   
  19.          left:290px;   
  20.          background-color: lightblue ;   
  21.      }   
  22.   
  23.     to {    
  24.         left:380px;   
  25.         background-color: lightseagreen;   
  26.      }   
  27. }  

CSS3中的Transition过度与Animation动画属性使用要点

alternate方式,放完就倒着放一遍
CSS3中的Transition过度与Animation动画属性使用要点

normal方式,就是放完重头再放

HTML / CSS 相关文章推荐
CSS3 开发工具收集
Apr 17 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 #HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 #HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 #HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 #HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 #HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 #HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 #HTML / CSS
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
JS 类型转换常见方法小结
2010/05/31 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python通过future处理并发问题
2017/10/17 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python实现图片上添加图片
2019/11/26 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
为什么要使用servlet
2016/01/17 面试题
巴西世界杯32强口号
2014/06/05 职场文书
个人主要事迹材料
2014/08/26 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang