CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

animation-delay

animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

通常用animation简写属性一次性设置动画效果较为方便。

初始值	`0s`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

animation-delay: 3s;

animation-delay: 2s, 4ms;

值

<time>: 从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。

animation-direction

概述

animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性animation中设定

初始值	`normal`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

animation-direction: normal

animation-direction: reverse

animation-direction: alternate

animation-direction: alternate-reverse

animation-direction: normal, reverse

animation-direction: alternate, reverse, normal

值

`normal`

每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate: 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse: 反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse: 反向交替，反向开始交替; 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始.

animation-duration

概述

animation-duration属性指定一个动画周期的时长。

默认值为0s，表示无动画。

使用简写属性animation很方便地同时设置所有的动画属性。

初始值	`0s`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
是否适用于 CSS 动画	否
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

animation-duration: 6s

animation-duration: 120ms

animation-duration: 1s, 15s

animation-duration: 10s, 30s, 230ms

值

<time>: 一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。

注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s。

animation-fill-mode

概述

animation-fill-mode 这个 CSS 属性用来指定在动画执行之前和之后如何给动画的目标应用样式。

初始值	`none`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

<single-animation-fill-mode> = none | forwards | backwards | both

animation-fill-mode: none

animation-fill-mode: forwards

animation-fill-mode: backwards

animation-fill-mode: both

/* 可以应用多个参数，这个时候使用逗号隔开  */

/* 各个参数应用于与次序相对应的动画名 */

animation-fill-mode: none, backwards

animation-fill-mode: both, forwards, none

值

none

动画执行前后不改变任何样式

forwards

目标保持动画最后一帧的样式，最后一帧是哪个取决于animation-direction和 animation-iteration-count:

`animation-direction`	`animation-iteration-count`	last keyframe encountered
`normal`	even or odd	`100%` or `to`
`reverse`	even or odd	`0%` or `from`
`alternate`	even	`0%` or `from`
`alternate`	odd	`100%` or `to`
`alternate-reverse`	even	`100%` or `to`
`alternate-reverse`	odd	`0%` or `from`

backwards

动画采用相应第一帧的样式，保持 animation-delay，第一帧取法如下：

`animation-direction`	first relevant keyframe
`normal` or `alternate`	`0%` or `from`
`reverse` or `alternate-reverse`	`100%` or `to`

both

动画将会执行 forwards 和 backwards 执行的动作。

代码实例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>动画</title>

    <style type="text/css">

        .demo {

            border-top: 100px solid #ccc;

            height: 300px;

            font-family: sans-serif;

        }

        @keyframes grow {

            0% { font-size: 0 }

            100% { font-size: 40px }

        }

        @-webkit-keyframes grow {

            0% { font-size: 0 }

            100% { font-size: 40px }

        }

        .demo:hover .grows {

            animation-name: grow;

            animation-duration: 3s;

            -webkit-animation-name: grow;

            -webkit-animation-duration: 3s;

        }

        .demo:hover .growsandstays {

            animation-name: grow;

            animation-duration: 3s;

            animation-fill-mode: forwards;

            -webkit-animation-name: grow;

            -webkit-animation-duration: 3s;

            -webkit-animation-fill-mode: forwards;

        }

    </style>

</head>

<body>

<p>Move your mouse over the grey box</p>

<div class="demo">

    <div class="grows">This just grows</div>

    <div class="growsandstays">This grows and stays big</div>

</div>

</body>

</html>

animation-iteration-count

概要

animation-iteration-count CSS属性定义动画在结束前运行的次数可以是1次无限循环.

默认属性 animation默认播放动画循环一次.

初始值	`1`
适用元素	all elements, `::before`and pseudo-elements `::after`
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

animation-iteration-count: infinite;

animation-iteration-count: ;

animation-iteration-count: 2.3;

animation-iteration-count: , , infinite;

值

infinite: 无限循环播放动画.
<number>: 动画播放的次数不可为负值.可以用小数定义循环( 0.5 将播放动画到关键帧的一半（from 0 ~ 50%).

语法

<single-animation-iteration-count> = infinite | <number>

animation-name

概述

animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列。

使用简写属性animation可以很方便地同时设置所有的动画属性。

初始值	`none`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
是否适用于 CSS 动画	否
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

<single-animation-name> = none | IDENT

animation-name: none

animation-name: test_05

animation-name: -specific

animation-name: sliding-vertically

animation-name: test1

animation-name: test1, animation4

animation-name: none, -moz-specific, sliding

animation-name: initial

animation-name: inherit

animation-name: unset

值

none: 特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
IDENT: 标识动画的字符串，由大小写不敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。

animation-play-state

概述

animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

初始值	`running`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
是否适用于 CSS 动画	否
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

/* Single animation */

animation-play-state: running;

animation-play-state: paused;

/* Multiple animations */

animation-play-state: paused, running, running;

/* Global values */

animation-play-state: inherited;

animation-play-state: initial;

animation-play-state: unset;

值

running

当前动画正在运行。
paused: 当前动画以被停止。

正式语法

<single-animation-play-state> = running | paused

animation-timing-function

概述

CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function>。

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

通常用animation简写定义整个动画属性更为方便。

初始值	`ease`
适用元素	all elements, `::before` and `::after` pseudo-elements
是否是继承属性	否
适用媒体	visual
计算值	as specified
是否适用于 CSS 动画	否
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

animation-timing-function: ease;

animation-timing-function: ease-in;

animation-timing-function: ease-out;

animation-timing-function: ease-in-out;

animation-timing-function: linear;

animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

animation-timing-function: step-start;

animation-timing-function: step-end;

animation-timing-function: steps(, end);

animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

值

<timingfunction>

每个 <timing-function>代表了应用于动画的timing function，定义于animation-property.

正式语法

<timing-function>#

CSS3 Animations的更多相关文章

CSS3 笔记四（Transforms/Transition/Animations）
CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() T ...
Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
40免费的 jQuery & CSS3 图片热点特效
jQuery CSS3 形象悬停效果可能是一个优秀的网站项目中添加的效果.这个特殊的收集是大约50个 jQuery CSS3 形象徘徊影响最近出版的.这些图像悬停效果可以作为一个有效的和创造性的方式添 ...
CSS3入门
CSS3 w3cschools css3 MDN英文 MDN中文 CSS3 is the latest evolution of the Cascading Style Sheets langua ...
Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
丰富您设计的10个CSS3效果库
Magic CSS3 Animations Magic CSS3 Animations是一个CSS3动画包,拥有一些特效可以你的Web项目中免费使用.拥有像金光闪闪,角度,旋转,炸弹等特殊效果.使用简 ...
竟然没有转载。。。A Few of My Favorite HTML5 and CSS3 Online Tools
HTML5 Boilerplate HTML5 Boilerplate provides a great way to get started building HTML5 sites. It inc ...
纯CSS3跳动焦点广告轮播特效
1. [代码] 纯CSS3跳动焦点广告轮播特效 <!-- Author: Developed by Caleb Jacob Author Website: http://iamceege.co ...
从Knockout到Angular的架构演变
2008年第一次在WPF中使用MVVM模式之后,就一直热衷于耦合隔离.模块化与重构.UI和逻辑分离.单元测试以及后面的领域模型.谈及MVVM模式,自己也开发过一套框架,但没有长期更新和维护,所以索性就 ...

随机推荐

Spring Boot 集成 Spring Security 使用自定义的安全数据源
编写一个类自定义实现 UserDetailsService 接口 @Service("customUserDetailService") public class CustomUs ...
ORA-00972
SQL> select to_char(sysdate,'YYYY-MM-DD HH24:MI:SS') as 日期时间 from dual;select to_char(sysdate,'YY ...
selinux 了解2
凡是对内核级, 如selinux的修改, 不只是对软件, 程序的修改, 那么修改之后都要重新启动. 针对windows下的截图, 像linux下的screenshot截图那样设置快捷键 shift+s ...
CAS KVM 虚拟机的保护与恢复
目录目录方式一方式二方式一思路:以 QCOW2 格式来备份和恢复被保护的 KVM 虚拟机 Step1:centos7_0(base qcow2) 以 qcow2 格式写入到 iSCSI 设备 ...
阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_2_练习_使用递归计算1-n之间的和
输出6 1到100之间的和求和的原理
node和数据库建立连接
var express = require('express') , app = express(); var querystring = require('querystring'); var ut ...
浅谈Java反射机制之获取类的方法和属性（包括构造函数）
上一篇获取类的字节码文件我们讲到了获取类的字节码文件的三种方法第三种方法通过getClass("全路径名")获取字节码文件最符合要求 1.获取构造方法先贴上我们要获取的 ...
1.关于狗书《Flask Web开发基于Python的web开发应用实战》身份验证的改进
在我学习用户身份验证的时候,我发现这里有个小弊端,在用户注册完成后想要验证邮箱的时候,点击邮箱中的网址进行验证,此时还要登陆,这及其不符合我们的习惯.一般情况下我们只需要点击网址就可以验证成功并且进入 ...
[Git] 005 初识 Git 与 GitHub 之分支
在 GitHub 的 UI 界面使用 Git(多图警告) 1. 建立分支 1.1 点击左上方的 Branch: master,在输入框中填入分支名,再点击下方的 Create branch 1.2 此 ...
javascript详细介绍
一.JavaScript基础 1.什么是JavaScript? JavaScript是一种客户端运行的解释性脚本语言. JavaScript是由网景(Netscape)推出的产品. Microsoft ...

CSS3 Animations