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 object-fit属性
Jul 27 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP中overload与override的区别
2017/02/13 PHP
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
jquery获取radio值实例
2014/10/16 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python list语法学习(带例子)
2013/11/01 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
深入浅析Python中的迭代器
2019/06/04 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python实发邮件实例详解
2019/11/11 Python
tensorflow的计算图总结
2020/01/12 Python
测量实习生自我鉴定
2013/09/19 职场文书
英语商务邀请函范文
2014/01/16 职场文书
综合实践教学反思
2014/01/31 职场文书
颁奖晚会主持词
2014/03/25 职场文书
2014年测量员工作总结
2014/12/12 职场文书
神龙架导游词
2015/02/11 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python