语法

@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. 使用Consul 实现 MagicOnion(GRpc) 服务注册和发现

    1.下载打开Consul 笔者是windows下面开发的(也可以使用Docker). 官网下载windows的Consul https://www.consul.io/ 使用cmd窗口打开,输入con ...

  2. ActiveMQ 的安装与使用

    消息中间件简介 消息中间件(MOM:Message Orient middleware) 消息中间件有很多的用途和优点: 1. 将数据从一个应用程序传送到另一个应用程序,或者从软件的一个模块传送到另外 ...

  3. 如何把web.xml中的context-param、Servlet、Listener和Filter定义添加到SpringBoot中

    把传统的web项目迁移到SpringBoot中,少不了web.xml中的context-param.Servlet.Filter和Listener等定义的迁移. 对于Servlet.Filter和Li ...

  4. Kali学习笔记25：Arachni使用（实现分布式扫描）

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Arachni不同于上次介绍的nikto和skipfi ...

  5. 项目笔记：2018年4月（SpringCloud架构和SpringBoot框架）

    一.启动Euerka服务 1.在启动类里用@propertySource引入全局配置文件noteapp-service.properties: 如上图.左侧为某服务配置文件properties,右侧为 ...

  6. Spring Cloud微服务如何设计异常处理机制？

    导读 今天和大家聊一下在采用Spring Cloud进行微服务架构设计时,微服务之间调用时异常处理机制应该如何设计的问题.我们知道在进行微服务架构设计时,一个微服务一般来说不可避免地会同时面向内部和外 ...

  7. asp.net core mvc发布后显示异常错误信息的方法

    在发布的项目文件夹中找到web.config文件,修改: <aspNetCore processPath="dotnet" arguments=".\Cloud.B ...

  8. Elasticsearch实践（三）：Mapping

    版本:Elasticsearch 6.2.4. Mapping类似于数据库中的表结构定义,主要作用如下: 定义Index下字段名(Field Name) 定义字段的类型,比如数值型,字符串型.布尔型等 ...

  9. Maven内置属性、POM属性

    1.内置属性(Maven预定义,用户可以直接使用) ${basedir}表示项目根目录,即包含pom.xml文件的目录; ${version}表示项目版本; ${project.basedir}同${ ...

  10. leetcode — next-permutation

    import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/next-permutation/ * * Creat ...