CSS动画

萌娘百科提醒您，此条目或需要大幅度整改，建议新用户不要模仿此条目格式建立新条目。

原因在于：

• 增添CSS动画历史和应用场合例子等通俗介绍

若您清楚改善现状的方法，可以尝试帮忙改进。

CSS动画是一种浏览器上的动态表现形式。

简介

大约在08年前后，市面上的主流浏览器以增强用户体验、方便代码设计为目的，开始增加一些不需要依赖JavaScript的特殊动画效果的实现。时至今日，这些内容已经被默认为CSS3标准的一部分，是一个浏览器所必须要支持的，一般认为它包括：变形（Transforms）、过渡（Transitions）、动画（Animation）三部分。

变形（Transforms）

变形（Transforms）分为2D变形和3D变形两种，本质上是使用矩阵向量对元素计算缩放、偏移、倾斜、旋转等变形，所以2D变形是3阶矩阵，具有6个参数、而3D变形则是4阶矩阵，具有16个参数。

Matrix

matrix(a,b,c,d,e,f)方法是一个矩阵，是其他所有的2D变形的根本方法。matrix不需要单位。

matrix3d(……)是3D矩阵，很麻烦。

矩阵
a	c	e	·	x	=	ax+cy+e
b	d	f		y		bx+dy+f
0	0	1		1		0+0+1

表中x、y表示换换前坐标。

例子：

<!--向左、下分别移动10像素的距离。-->
<div style="display:inline-block;background-color:#000;width:100px;height:100px;">
<div style="background-color:#fff;width:10px;height:10px;transform:translate(10px,10px)">
</div>
</div>
<!--换成矩阵的书写方式。-->
<div style="display:inline-block;background-color:#000;width:100px;height:100px;">
<div style="background-color:#fff;width:10px;height:10px;transform:matrix(1,0,0,1,10,10)">
</div>
</div>

Translate

Translate是需要单位的。

translate(x,y)是2D坐标转换，x表示横向偏移，y表示纵向偏移。

translate3d(x,y,z)是3D坐标转换，

translateX(x)是X轴的坐标转换，translateY(y)是Y轴的坐标转换。

translateZ(z)是Z轴的坐标转换，是3D坐标转换。

公式：translate(x,y)=matrix(1,0,0,1,x,y)

Scale

scale(x,y)是定义一个2D缩放。

scale(x,y)是2D坐标缩放，x表示横向缩放，y表示纵向缩放。

scaleX(x)是X轴的缩放，scaleY(y)是Y轴的缩放。

scaleZ(z)是Z轴的缩放，是3D缩放转换。

公式：scale(x,y)=matrix(x,0,0,y,0,0)

Rotate

rotate(angle)是定义一个2D旋转，angle表示一个角度，单位是deg。

rotate3d(x,y,z,angle)是定义一个3D旋转。

rotateX(angle)定义沿着X轴的3D旋转，rotateY(angle)定义沿着Y轴的3D旋转，rotateZ(angle)定义沿着Z轴的3D旋转。

公式：rotate(θ)=matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

注意：第三个值前面带了一个负号，这是奇偶性问题，这里不做展开。

Skew

skew(x,y)是定义一个2D倾斜转换，x表示X轴的倾斜转换，y表示Y轴的倾斜转换。

skew3d(x,y,z)是一个3D倾斜转换。

skewX(x)是X轴的倾斜转换，skewY(y)是Y轴的倾斜转换。

公式：skew(x,y)=matrix(1,tan y,tan x,1,0,0)

Perspective

perspective(n)定义3D透视。

例子

关于3D转换的小例子：

过渡（Transitions）

默认的简写方法是：transition: transition-property transition-duration transition-timing-function Transition-delay

Property

transition-property定义需要进行过渡效果属性名称，这个属性一定要是可以连续变化的，比如：宽高、字号、颜色等。

可以声明多个属性同时开始过渡，以逗号隔开即可，all表示这个元素的所有属性都将进行过渡。

Duration

transition-duration定义过渡效果花费的时间，默认是0，单位是ms，0意味着不会有任何变化。

Timing-function

transition-timing-function规定过渡效果的时间曲线，默认是"ease"。

它可以是以下参数或方法。

• linear：匀速变化，等同于cubic-bezier(0,0,1,1)。
• ease：先慢后快再慢。等同于cubic-bezier(0.25,0.1,0.25,1)。
• ease-in：缓慢加速，等同于cubic-bezier(0.42,0,1,1)。
• ease-out：缓慢减速，等同于cubic-bezier(0,0,0.58,1)。
• ease-in-out：缓慢加速缓慢减速，等同于cubic-bezier(0.42,0,0.58,1)。
• cubic-bezier(n,n,n,n)声明一个方法，规定一个贝塞尔曲线函数定义时间曲线，各个n的有效值是0到1。

Transition-delay

transition-delay定义过渡效果的延迟时间，单位是ms，默认是0，0意味着不延迟，立即开始。

例子

动画（Animation）

参考：{{M-animation}}，通过调整旋转的角度以及动画播放速度，可以得到不同的效果。（示例播放次数的参数为无限循环：animation-iteration-count:infinite;）

注意：鼠标悬停以此打断Mea右手（的动画播放）。

{{M-animation}}<div style="display:inline-blockposition:relative;width:500px;height:666px;">
<div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div>
<div class="moe-ani-count-infinite ani-time-1 ani-rotate30-re"
style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);">
{{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}}
</div>
</div>
<div class="moe-animation" style="display:inline-block;position:relative;width:500px;height:666px;">
<div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div>
<div class="ani-hover moe-ani-count-infinite ani-time-01 ani-rotate360"
style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);">
{{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}}
</div>
</div>

animation

所有动画属性的简写属性，除了 animation-play-state 属性。

@keyframes

@keyframes规定动画关键帧，它只能写在样式表里，没办法写在内联样式中。

from等于0%，to等于100%，中途也可以使用百分比数值增加更多的关键帧，具体时间还是duration定义的总时长。

/* 比如将样式的颜色从red变为black */
@keyframes seecolor1
{
from {color:red;}
to {color:black;}
}
@keyframes seecolor2
{
0% {color:red;}
50% {color:blue}
100% {color:black;}
}

name

animation-name：规定由@keyframes定义的动画的名称，具有这个属性的元素将会执行@keyframes规定的动画。

duration

animation-duration定义动画效果完成一个周期所花费的时间，默认是0，单位是ms。

timing-function

animation-timing-function规定动画的速度曲线。默认是 "ease"，同过渡一样。

delay

animation-delay定义动画效果的延迟时间，单位是ms，默认是0，0意味着不延迟，立即开始。

iteration-count

animation-iteration-count定义动画播放的次数，默认是1，infinite将会无限次循环播放。

direction

animation-direction定义动画完成一次周期后，在下一周期内是否逆向地播放。默认是normal，alternate将会正向逆向交替播放。

play-state

animation-play-state规定动画播放状态，默认是播放中running，paused是暂停状态。通过js可以对元素的这一属性进行更改，可以播放或暂停。

fill-mode

animation-fill-mode规定元素在动画播放之外的状态。

• none：不改变默认行为。
• forwards：动画完成后，保持在最后一个关键帧中定义的样式。
• backwards：动画开始前，animation-delay中，应用在第一个关键帧中定义的样式。
• both：同时具有两种属性。

例子

紅葉