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模式,自己也开发过一套框架,但没有长期更新和维护,所以索性就 ...

随机推荐

C++用参数返回结果与用返回值返回结果的思考
/*** *xvkBuffer作为参数比写为返回值的好处是: *1,xvkBuffer可以是堆变量或栈变量,若写为返回值则只能是堆上申请,因为必须保证它的永久性 *2,xvkBuffer或作为栈变量返 ...
WinForm实现最小化右下角
首先,要在窗体里面加入这么两个控件,左边的是托盘控件,右边的是菜单控件. 然后设置窗体的FormClosing事件: if (e.CloseReason == CloseReason.UserClos ...
（一）Maven之使用入门
目录今天是端午节哦,昨天大学同学举个了会.鱼头泡饼贼拉香,嗯哼,有点跑题了:之后去了同学家里坐了坐:发现同我有一样的书,即:<maven实战>:记得是从二手网店淘到的,已经买了有小半年, ...
Java中使用MATLAB作图 .
最近做一个项目,需要很多进行很多信号处理——小魏就是学软件的,对信号处理简直是个小白,最简单的实现就是傻瓜似的调用MATLAB的各种工具箱,达到目的就行. 同时,MATLAB是种解释性语言,执行效率比 ...
numpy多维数组
1 多维数组的切片用法 c = np.array([[[0,1,2],[4,5,6],[8,7,5],[10,11,12]],[[6,2,3],[9,8,34],[100,101,102],[110, ...
python常用包官网
Pandas http://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.Series.reset_index.html?high ...
JMeter Gui – TestElement约定（转自约会言行的博客，链接：http://blog.csdn.net/yue530tomtom/article/details/77649872?locationNum=4&fps=1）
在编写任何JMeter组件时,必须注意某些特定的约定——如果JMeter环境中正确地运行JMeter组件,那么它将会运行.本部分描述了组件的GUI部分必须满足的约定. JMeter中的GUI代码严格地 ...
38 是否要使用memory引擎的表
38 是否要使用memory引擎的表内存表的数据组织结构 create table t1(id int primary key, c int) engine=Memory; create table ...
16/7/8_PHP-正则表达式
什么叫正则表达式 PCRE库函数中,正则匹配模式使用分隔符与元字符组成,分隔符可以是非数字.非反斜线.非空格的任意字符.经常使用的分隔符是正斜线(/).hash符号(#) 以及取反符号(~),例如: ...
layui中获取全部提交的数据
<form class="layui-form" action="">...........input textarea ......</fo ...

CSS3 Animations