语法

@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. MySQL 报错ERROR 1054 (42S22): Unknown column 'plugin' in 'mysql.user'

    MySQL  我们在创建用户的时候,可能会遇到以下报错: ERROR 1054 (42S22): Unknown column 'plugin' in 'mysql.user' 说明mysq.user ...

  2. MySql事务的隔离级别及作用

    逻辑工作单元遵循一系列(ACID)规则则称为事务. 原子性:保证事务是一系列的运作,如果中间过程有一个不成功则全部回滚,全部成功则成功.保证了事务的原则性. 一致性:一致性指的是比如A向B转100块钱 ...

  3. JS日期相减得到天数

    废话不多说直奔主题,解决思路核心是时间戳相减  灵感来自于我经常用到一个工具方法:格式化时间,也是用时间戳 function GetNumberOfDays(date1,date2){//获得天数 / ...

  4. Elastic Job学习

    从执行的结果来看,随着服务器的增加,分片的结果也不一样 当只有一台服务器的时候,所有分片都到这一台服务器上 当服务器增加到两台的时候,分片的结果是0 1 2 3 4和5 6 7 8 9 当服务器增加到 ...

  5. Java代码更改shape和selector文件的颜色值

    Android里面经常会使用shape或者selector来定制一些View的背景.那么如果想要动态更改shape或者seletor文件中的颜色值,该怎么处理呢? 一.Java代码更改shape的颜色 ...

  6. 介绍 JSON（摘自网络）

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  7. shiro 获取请求头中的 rememberMe

    前言: 上一篇提到了, 将 sessionId 放到请求头中去, 那rememberMe是否也可以放到请求头中去呢. 其实不管是sessionId还是rememberMe, shiro都会默认往coo ...

  8. java for循环里面执行sql语句操作,有效结果只有一次,只执行了一次sql mybatis 循环执行update生效一次 实际只执行一次

    java后台controller中,for循环执行数据库操作,但是发现实际仅仅执行了一次,或者说提交成功了一次,并没有实际的个数循环 有可能是同一个对象导致的 可以仔细看一下下面两段代码有什么区别 p ...

  9. 翻译：INSERT(已提交到MariaDB官方手册)

    本文为mariadb官方手册:INSERT的译文. 原文:https://mariadb.com/kb/en/insert/我提交到MariaDB官方手册的译文:https://mariadb.com ...

  10. python中的模块和包

    模块 一 什么是模块 模块就是一组功能的集合体,可以通过导入模块来复用模块的功能. 比如我在同一个文件夹定义两个.py文件,分别命名为A.py和B.py,那么可以通过在A文件里通过import B来使 ...