CSS3中Animation动画属性用法详解


Posted in HTML / CSS onJuly 04, 2016

要使用animation动画,先要熟悉一下keyframes,Keyframes的语法规则:命名是由”@keyframes”开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则。不同关键帧是通过from(相当于0%)、to(相当于100%)或百分比来表示(为了得到最佳的浏览器支持,建议使用百分比),如下定义一个简单的动画:

CSS Code复制内容到剪贴板
  1. @keyframes myfirst /*定义动画名*/  
  2.     {   
  3.     0%   {background:redleft:0pxtop:0px;} /*定义起始帧样式,0%可以换成from*/  
  4.     25%  {background:yellowleft:200pxtop:0px;}   
  5.     50%  {background:blueleft:200pxtop:200px;}   
  6.     75%  {background:greenleft:0pxtop:200px;}   
  7.     100% {background:redleft:0pxtop:0px;} /*定义结束帧样式,100%可以换成to*/  
  8.     }   
  9.   

@keyframes定义好了,要使其能发挥效果,必须通过animation把它绑定到一个选择器,否则动画不会有任何效果。下面列出了animation的属性:

CSS3中Animation动画属性用法详解

下面设置上述的所有属性

CSS Code复制内容到剪贴板
  1. animation-name:myfirst;   
  2. animation-duration:5s;   
  3. animation-timing-function:linear;   
  4. animation-delay:1s;   
  5. animation-iteration-count:infinite;   
  6. animation-direction:alternate;   
  7. animation-play-state:running;   
  8.   

上述所有代码可以如下简写:

CSS Code复制内容到剪贴板
  1. animation:myfirst 5s linear 2s infinite alternate;   
  2. animation-play-state:running;   
  3.   

浏览器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注意:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

下面给出上面介绍的关于keyframes和animation属性的完整代码示例:

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>animation演示</title>  
  6.     <style>    
  7.     div   
  8.     {   
  9.     width:100px;   
  10.     height:100px;   
  11.     background:red;   
  12.     position:relative;   
  13.     animation-name:myfirst;   
  14.     animation-duration:5s;   
  15.     animation-timing-function:linear;   
  16.     animation-delay:1s;   
  17.     animation-iteration-count:infinite;   
  18.     animation-direction:alternate;   
  19.     animation-play-state:running;   
  20.     /* Safari and Chrome: */   
  21.     -webkit-animation-name:myfirst;   
  22.     -webkit-animation-duration:5s;   
  23.     -webkit-animation-timing-function:linear;   
  24.     -webkit-animation-delay:1s;   
  25.     -webkit-animation-iteration-count:infinite;   
  26.     -webkit-animation-direction:alternate;   
  27.     -webkit-animation-play-state:running;   
  28.     }   
  29.   
  30.     @keyframes myfirst /*定义动画名*/   
  31.     {   
  32.     0%   {background:red; left:0px; top:0px;} /*定义起始帧样式,0%相当于from*/   
  33.     25%  {background:yellow; left:200px; top:0px;}   
  34.     50%  {background:blue; left:200px; top:200px;}   
  35.     75%  {background:green; left:0px; top:200px;}   
  36.     100% {background:red; left:0px; top:0px;} /*定义结束帧样式,100%相当于to*/   
  37.     }   
  38.   
  39.     @-webkit-keyframes myfirst /* Safari and Chrome */   
  40.     {   
  41.     0%   {background:red; left:0px; top:0px;}   
  42.     25%  {background:yellow; left:200px; top:0px;}   
  43.     50%  {background:blue; left:200px; top:200px;}   
  44.     75%  {background:green; left:0px; top:200px;}   
  45.     100% {background:red; left:0px; top:0px;}   
  46.     }   
  47.     </style>  
  48. </head>  
  49. <body>  
  50.     <p>该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>  
  51.     <div></div>  
  52. </body>  
  53. </html>  

上面代码演示了一个正方形沿着一个正方形轨迹运动,基数次按正方向运动,偶数次按反方向运动,运动过程中还带有颜色变化。具体效果,读者可以自行运行代码观察。

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

HTML / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 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
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 #HTML / CSS
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
使用Apache的rewrite技术
2006/06/22 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php 动态添加记录
2009/03/10 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
js判断鼠标左、中、右键哪个被点击的方法
2015/01/27 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
Python greenlet实现原理和使用示例
2014/09/24 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python3+Appium安装使用教程
2019/07/05 Python
python eventlet绿化和patch原理
2020/11/21 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
Java程序员面试90题
2013/10/19 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
拆迁委托协议书
2014/09/15 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
质量整改通知单
2015/04/21 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android