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 Columns分列式布局方法简介
May 03 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 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 七大优势分析
2009/06/23 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
php框架知识点的整理和补充
2021/03/01 PHP
javascript smipleChart 简单图标类
2011/01/12 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
JavaScript实现区块链
2018/03/14 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
Python基于requests库爬取网站信息
2020/03/02 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
烹饪自我鉴定
2014/03/01 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
食品安全工作实施方案
2014/03/26 职场文书
2014年保育员工作总结
2014/12/02 职场文书
社区活动总结范文
2015/05/07 职场文书
技术转让协议书
2016/03/19 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
分享几种python 变量合并方法
2022/03/20 Python