CSS3 中的@keyframes介绍


Posted in HTML / CSS onSeptember 02, 2014

语法

@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定义动画的名称。
keyframes-selector
必需。动画时长的百分比。
合法的值:
0-100%
from(与 0% 相同)
to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。

定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

例:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}</p> <p>@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}</p> <p>@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body></p> <p><p><b>注释:</b>本例在 Internet Explorer 中无效。</p></p> <p><div></div></p> <p></body>
</html>
HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 #HTML / CSS
css3中背景尺寸background-size详解
Sep 02 #HTML / CSS
css3中transition属性详解
Sep 02 #HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 #HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 #HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
You might like
PHP中用hash实现的数组
2011/07/17 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
php实现websocket实时消息推送
2018/03/30 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
浅析return false的正确使用
2013/11/04 Javascript
js实现日期级联效果
2014/01/23 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
python函数返回多个值的示例方法
2013/12/04 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
Django 大文件下载实现过程解析
2019/08/01 Python
基于python监控程序是否关闭
2020/01/14 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
单位领导证婚词
2014/01/14 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS