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 相关文章推荐
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
公司培训心得体会
2014/01/03 职场文书
小学数学国培感言
2014/03/10 职场文书
党支部换届选举方案
2014/05/08 职场文书
大学生受助感言
2015/08/01 职场文书