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和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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
PHP引用(&)各种使用方法实例详解
2014/03/20 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP加密解密函数详解
2015/10/28 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
python列表操作使用示例分享
2014/02/21 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
.NET方向面试题
2014/11/20 面试题
教师自我评价范文
2013/12/16 职场文书
银行求职信个人范文
2013/12/16 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
酒店端午节活动方案
2014/08/26 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
学校财务管理制度
2015/08/04 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL