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 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
jQuery事件详解
2017/02/23 Javascript
jquery 手势密码插件
2017/03/17 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Vue中render方法的使用详解
2018/01/26 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
python WindowsError的错误代码详解
2017/07/23 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
国际经济贸易专业推荐信
2013/11/06 职场文书
企业后勤岗位职责
2014/02/28 职场文书
行政助理工作职责范本
2014/03/04 职场文书
党员民主生活会材料
2014/12/15 职场文书
武夷山导游词
2015/02/03 职场文书
党章学习心得体会2016
2016/01/14 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python