CSS3中的@keyframes关键帧动画的选择器绑定


Posted in HTML / CSS onJune 13, 2016

在css3中,我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器中,否则不会有效果出现。同时,我们还需定义动画时长和动画名称

语法

CSS Code复制内容到剪贴板
  1. @keyframes animationname {keyframes-selector {css-styles;}}  

描述
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。

在css3中,我们以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。其中,0% 是动画的开始时间,100% 动画的结束时间。

Keyframe选择器
让我们在@keyframes中添加一些动画规则:

CSS Code复制内容到剪贴板
  1. @keyframes sunrise {   
  2.    0% {   
  3.       bottombottom: 0;   
  4.       left340px;   
  5.       background#f00;   
  6.    }   
  7.   
  8.    33% {   
  9.       bottombottom340px;   
  10.       left340px;   
  11.       background#ffd630;   
  12.    }   
  13.   
  14.    66% {   
  15.       bottombottom340px;   
  16.       left40px;   
  17.       background#ffd630;   
  18.    }   
  19.   
  20.    100% {   
  21.       bottombottom: 0;   
  22.       left40px;   
  23.       background#f00;   
  24.    }   
  25. }  

通过添加这些新的动画规则,我们引入了keyframe选择器。在上述示例代码中,0%, 33%, 66%, 以及100%即为keyframe选择器。其中,0%和100%可以使用”from”和”to”来代替。
示例中的四套动画规则表达的是这个动画元素的四种状态(四个关键帧),以及处于这四种状态中时的样式。那些没有定义的状态(比如,从34%到65%)则组成了这些已定义的状态间的过渡状态。
尽管规范还在修改中,有一些规则用户还是应该遵守。例如,keyframes的书写顺序并不重要,它们会按百分数的升序播放。因此,如果你把”to”关键帧放在”from”关键帧之前,动画的播放并不会有改变。除此以外,如果你没有指定to或者from或者对应的百分数,浏览器会自动加上。所以,@keyframes的语法并不符合一般CSS语法的层叠覆盖规则。

HTML / CSS 相关文章推荐
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
详解HTML5常用的语义化标签
Sep 27 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 #HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 #HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 #HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 #HTML / CSS
浅析css3中matrix函数的使用
Jun 06 #HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 #HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 #HTML / CSS
You might like
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
php的socket编程详解
2016/11/20 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python列表(list)常用操作方法小结
2015/02/02 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
教师队伍管理制度
2014/01/14 职场文书
信息总监管理职责范本
2014/03/08 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
村班子对照检查材料
2014/08/18 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2015年消防工作总结
2015/04/24 职场文书
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js