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用@font-face实现自定义英文字体
Sep 23 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
canvas像素画板的实现代码
Nov 21 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
CSS的calc函数用法小结
Jun 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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
laravel 5异常错误:FatalErrorException in Handler.php line 38的解决
2017/10/12 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
如何通过Python实现标签云算法
2019/07/02 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
c/c++某大公司的两道笔试题
2014/02/02 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
云冈石窟导游词
2015/02/04 职场文书
求职自荐信怎么写
2015/03/04 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers