语法

@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 */

}

@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;}

}

@-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;}

}

@-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;}

}

@-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><b>注释：</b>本例在 Internet Explorer 中无效。</p>

    <div></div>

</body>

</html>

CSS3 - @keyframes的更多相关文章

  1. CSS3 @keyframes 规则

    今天来给大家分享一下CSS3 @keyframes 规则! 在你了解CSS3 @keyframes 规则时我先来给大家说说什么是css3中的动画 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您 ...

  2. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  3. CSS3 keyframes动画实现弹跳效果

    首先,“回到顶部”.“用户反馈”这两个按钮是通过定位放在左下角上. (1)“回到顶部”的按钮只有当滚动条有出现下滑时才出现 (2)“用户反馈”按钮,用户刚打开时会抖动一下,引起用户的注意,然后才定住. ...

  4. CSS3 @keyframes 语法

    http://www.w3chtml.com/css3/rules/@keyframes.html <!DOCTYPE html><html lang="zh-cn&quo ...

  5. css3 @keyframes、transform详解与实例

    一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...

  6. CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

    一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

  7. css3 keyframes在yuicompressor下压缩问题

    @keyframes proBackAction { 0% { opacity:; } 100% { opacity: .8; } } @keyframes proBackAction { 0{ op ...

  8. css3 keyframes animation

    html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img ...

  9. animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画

    通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...

  10. CSS3 @keyframes 用法（简单动画实现）

    定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或 ...

随机推荐

  1. [Postman]拦截器扩展(15)

    什么是拦截器 注意: Interceptor功能仅在我们的Postman Chrome应用程序中受支持,目前在Postman桌面应用程序中不可用.如果您希望我们的桌面应用程序中提供此功能,请在此处告知 ...

  2. ueditor编辑器显示style标签样式

    在使用ueditor编辑器中,想保存style标签的样式需要对js配置文件进行修改.官方为了安全考虑,默认会将style标签转为DIV标签,导致样式不能显示出对应的效果. 基于1.4.3版本修改如下 ...

  3. HTML一些有趣的东西

    1.<head>标签里: <meta http-equiv="Refresh" content="3"/><!--三秒自动刷新-- ...

  4. IdentityServer4源码颁发token分析及性能优化

    IdentityServer4源码地址 IdentityModel源码地址 以下的流程用ResourceOwnerPassword类型获取token作为介绍 分两种获取形式说明 token请求地址为默 ...

  5. linux 命令 — sed

    sed stream editor,流编辑器 查找替换 sed 's/pattern/replace_string/' file 替换每一行第一次出现的pattern,将替换后的文本输出到stdout ...

  6. thinkphp自动填充分析

    thinkphp有一个自动填充字段的方法填充规则如下 array( array(完成字段1,完成规则,[完成条件,附加规则]), array(完成字段2,完成规则,[完成条件,附加规则]), .... ...

  7. thinkphp自动验证分析

    thinkphp有一个自动验证的方法验证规则如下 array( array(验证字段1,验证规则,错误提示,[验证条件,附加规则,验证时间]), array(验证字段2,验证规则,错误提示,[验证条件 ...

  8. 精读JavaScript模式(八)，JS类式继承

    一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...

  9. 使用Pyinstaller转换.py文件为.exe可执行程序

    pyinstaller能够在Windows.Linux等操作系统下将Python脚本打包成可直接运行程序.使Python脚本可以在没有安装Python的环境中直接运行,方便共享. 测试环境 pytho ...

  10. shell测试命令test、[ ]、[[ ]]

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html test可用于测试表达式,支持测试的范围包括:字符串比较,算术 ...