语法

@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. php过滤&nbsp;字符

    今天在抓取页面中得到字符串:"卡牌 ",使用str_replace . preg_replace 和 strip_tags过滤都无解. 最后google到2种方式,如下: str_ ...

  2. Java-二进制转10进制原理机制

    任何文件在计算机储存时都是以二进制储存的,由 1和0 组成,如: 101010101010100111110100101010 现在有一组二进制数据: 10010110 那么他转成10进制是多少呢(我 ...

  3. Hystrix 停止开发。。。Spring Cloud 何去何从？

    栈长得到消息,Hystrix 停止开发了... 大家如果有对 Hystrix 不清楚的,请看下这篇文章:分布式服务防雪崩熔断器,Hystrix理论+实战. 来看下 Hystrix 停止开发官宣: ht ...

  4. vue的Vuex

    网上也很多文章,但解释起来的确玄乎,小白们很难理解到位. 自问文笔没大神们好只是自己了解了掌握了Vuex用法以及主要思路 但要我解释起来也只能参考大神们的说法 Vuex就是一个全局变量,而这个全局变量 ...

  5. 一款好用 mongodb 可视化工具

    最近想自己搭建一个个人博客,所以学了下mongodb,mongodb是用命令行输入的,有些人可能不太习惯,我自己找了下mongodb的一些可视化工具,一开始安装的是mongoVUE,mongoVUE页 ...

  6. Ocelot简易教程（一）之Ocelot是什么

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9557375.html Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocel ...

  7. 菜鸟系列docker——docker仓库(2)

    1.仓库Registry 我们一般的镜像都是保存在仓库中,这样在其他服务器上可以直接从仓库获取镜像.仓库一般分为公共registry和私有registry.公共registry一般是Docker公司负 ...

  8. excel 中批量生成mysql的脚本

    一.假设你的表格有A.B.C三列数据,希望导入到你的数据库中表格table,对应的字段分别是col1.col2.col3 二.在你的表格中增加一列,利用excel的公式自动生成sql语句,具体方法如下 ...

  9. ZooKeeper系列(2)：ZooKeeper命令行工具zkCli.sh

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk 1.简介 ZooKeeper提供了一个非常简单的命令行客户端zk ...

  10. go基础系列：结构struct

    Go语言不是一门面向对象的语言,没有对象和继承,也没有面向对象的多态.重写相关特性. Go所拥有的是数据结构,它可以关联方法.Go也支持简单但高效的组合(Composition),请搜索面向对象和组合 ...