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中currentColor关键字的妙用
Feb 27 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
Sep 11 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 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 获取select下拉列表框的值
2010/05/08 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
vue实现单选和多选功能
2017/08/11 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python3.6正式版新特性预览
2016/12/15 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python线程池threadpool实现篇
2018/04/27 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python实现学生管理系统开发
2020/07/24 Python
python实现三种随机请求头方式
2021/01/05 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
银行开业庆典方案
2014/02/06 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android