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 响应式媒体查询的示例代码
Sep 25 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
MySQL相关说明
2007/01/15 PHP
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP 类型转换函数intval
2009/06/20 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
零基础php编程好学吗
2019/10/11 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
2020/07/18 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
Python入门_条件控制(详解)
2017/05/16 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
大学生求职自我评价
2014/01/16 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
村庄环境整治方案
2014/05/15 职场文书
2015年春节标语口号
2014/12/09 职场文书
导师鉴定意见
2015/06/05 职场文书
于丹论语心得观后感
2015/06/15 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript