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意味着不延迟，立即开始。

例子

.mw-parser-output .moe-hover{display:inline-block}.mw-parser-output .moe-hover .moe-dis-block{display:block}.mw-parser-output .moe-hover .moe-dis-none{display:none}.mw-parser-output .moe-hover .moe-dis-inline{display:inline}.mw-parser-output .moe-hover .moe-dis-inline-block{display:inline-block}.mw-parser-output .moe-hover:hover .onhover-none{display:none}.mw-parser-output .moe-hover:hover .onhover-block{display:block}.mw-parser-output .moe-hover:hover .onhover-inline-block{display:inline-block}.mw-parser-output .moe-hover .onhover-fadeIn{opacity:0}.mw-parser-output .moe-hover:hover .onhover-fadeIn{opacity:1}.mw-parser-output .moe-hover:hover .onhover-fadeOut{opacity:0}.mw-parser-output .moe-hover .onhover-fadeOut{transition:opacity 1s}.mw-parser-output .moe-hover .onhover-fadeIn{transition:opacity 1s}.mw-parser-output .moe-hover .onhover-fade-fast{transition:opacity 0.3s}.mw-parser-output .moe-hover .onhover-fade-slow{transition:opacity 2s}

动画（Animation）

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

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

.mw-parser-output .moe-animation:hover .ani-hover{animation-play-state:paused}.mw-parser-output .moe-ani-count-infinite,.mw-parser-output .ani-count-infinite,.mw-parser-output .ani-infinite{animation-iteration-count:infinite}.mw-parser-output .ani-linear{animation-timing-function:linear}.mw-parser-output .ani-stay{animation-fill-mode:forwards}.mw-parser-output .ani-time-01{animation-duration:0.1s}.mw-parser-output .ani-time-02{animation-duration:0.2s}.mw-parser-output .ani-time-03{animation-duration:0.3s}.mw-parser-output .ani-time-04{animation-duration:0.4s}.mw-parser-output .ani-time-05{animation-duration:0.5s}.mw-parser-output .ani-time-06{animation-duration:0.6s}.mw-parser-output .ani-time-07{animation-duration:0.7s}.mw-parser-output .ani-time-08{animation-duration:0.8s}.mw-parser-output .ani-time-09{animation-duration:0.9s}.mw-parser-output .ani-time-1{animation-duration:1s}.mw-parser-output .ani-time-2{animation-duration:2s}.mw-parser-output .ani-time-3{animation-duration:3s}.mw-parser-output .ani-time-4{animation-duration:4s}.mw-parser-output .ani-time-5{animation-duration:5s}.mw-parser-output .ani-time-6{animation-duration:6s}.mw-parser-output .ani-time-7{animation-duration:7s}.mw-parser-output .ani-time-8{animation-duration:8s}.mw-parser-output .ani-time-9{animation-duration:9s}.mw-parser-output .ani-time-10{animation-duration:10s}.mw-parser-output .ani-time-11{animation-duration:11s}.mw-parser-output .ani-time-12{animation-duration:12s}.mw-parser-output .ani-time-13{animation-duration:13s}.mw-parser-output .ani-time-14{animation-duration:14s}.mw-parser-output .ani-time-15{animation-duration:15s}.mw-parser-output .ani-time-16{animation-duration:16s}.mw-parser-output .ani-time-17{animation-duration:17s}.mw-parser-output .ani-time-18{animation-duration:18s}.mw-parser-output .ani-time-19{animation-duration:19s}.mw-parser-output .ani-time-20{animation-duration:20s}.mw-parser-output .ani-time-21{animation-duration:21s}.mw-parser-output .ani-time-22{animation-duration:22s}.mw-parser-output .ani-time-23{animation-duration:23s}.mw-parser-output .ani-time-24{animation-duration:24s}.mw-parser-output .ani-time-25{animation-duration:25s}.mw-parser-output .ani-time-26{animation-duration:26s}.mw-parser-output .ani-time-27{animation-duration:27s}.mw-parser-output .ani-time-28{animation-duration:28s}.mw-parser-output .ani-time-29{animation-duration:29s}.mw-parser-output .ani-time-30{animation-duration:30s}.mw-parser-output .ani-time-31{animation-duration:31s}.mw-parser-output .ani-time-32{animation-duration:32s}.mw-parser-output .ani-time-33{animation-duration:33s}.mw-parser-output .ani-time-34{animation-duration:34s}.mw-parser-output .ani-time-35{animation-duration:35s}.mw-parser-output .ani-time-36{animation-duration:36s}.mw-parser-output .ani-time-37{animation-duration:37s}.mw-parser-output .ani-time-38{animation-duration:38s}.mw-parser-output .ani-time-39{animation-duration:39s}.mw-parser-output .ani-time-40{animation-duration:40s}.mw-parser-output .ani-time-41{animation-duration:41s}.mw-parser-output .ani-time-42{animation-duration:42s}.mw-parser-output .ani-time-43{animation-duration:43s}.mw-parser-output .ani-time-44{animation-duration:44s}.mw-parser-output .ani-time-45{animation-duration:45s}.mw-parser-output .ani-time-46{animation-duration:46s}.mw-parser-output .ani-time-47{animation-duration:47s}.mw-parser-output .ani-time-48{animation-duration:48s}.mw-parser-output .ani-time-49{animation-duration:49s}.mw-parser-output .ani-time-50{animation-duration:50s}.mw-parser-output .ani-time-51{animation-duration:51s}.mw-parser-output .ani-time-52{animation-duration:52s}.mw-parser-output .ani-time-53{animation-duration:53s}.mw-parser-output .ani-time-54{animation-duration:54s}.mw-parser-output .ani-time-55{animation-duration:55s}.mw-parser-output .ani-time-56{animation-duration:56s}.mw-parser-output .ani-time-57{animation-duration:57s}.mw-parser-output .ani-time-58{animation-duration:58s}.mw-parser-output .ani-time-59{animation-duration:59s}.mw-parser-output .ani-time-1m .ani-time-60{animation-duration:60s}.mw-parser-output .ani-time-1h,.mw-parser-output .ani-time-60m,.mw-parser-output .ani-time-3600{animation-duration:3600s}.mw-parser-output .ani-time-1d,.mw-parser-output .ani-time-24h,.mw-parser-output .ani-time-1440m,.mw-parser-output .ani-time-86400{animation-duration:86400s}.mw-parser-output .ani-time-7d,.mw-parser-output .ani-time-168h,.mw-parser-output .ani-time-10080m,.mw-parser-output .ani-time-604800{animation-duration:604800s}.mw-parser-output .ani-delay-01{animation-delay:0.1s}.mw-parser-output .ani-delay-02{animation-delay:0.2s}.mw-parser-output .ani-delay-03{animation-delay:0.3s}.mw-parser-output .ani-delay-04{animation-delay:0.4s}.mw-parser-output .ani-delay-05{animation-delay:0.5s}.mw-parser-output .ani-delay-06{animation-delay:0.6s}.mw-parser-output .ani-delay-07{animation-delay:0.7s}.mw-parser-output .ani-delay-08{animation-delay:0.8s}.mw-parser-output .ani-delay-09{animation-delay:0.9s}.mw-parser-output .ani-delay-1{animation-delay:1s}.mw-parser-output .ani-delay-2{animation-delay:2s}.mw-parser-output .ani-delay-3{animation-delay:3s}.mw-parser-output .ani-delay-4{animation-delay:4s}.mw-parser-output .ani-delay-5{animation-delay:5s}.mw-parser-output .ani-delay-6{animation-delay:6s}.mw-parser-output .ani-delay-7{animation-delay:7s}.mw-parser-output .ani-delay-8{animation-delay:8s}.mw-parser-output .ani-delay-9{animation-delay:9s}.mw-parser-output .ani-delay-10{animation-delay:10s}.mw-parser-output .ani-delay-11{animation-delay:11s}.mw-parser-output .ani-delay-12{animation-delay:12s}.mw-parser-output .ani-delay-13{animation-delay:13s}.mw-parser-output .ani-delay-14{animation-delay:14s}.mw-parser-output .ani-delay-15{animation-delay:15s}.mw-parser-output .ani-delay-16{animation-delay:16s}.mw-parser-output .ani-delay-17{animation-delay:17s}.mw-parser-output .ani-delay-18{animation-delay:18s}.mw-parser-output .ani-delay-19{animation-delay:19s}.mw-parser-output .ani-delay-20{animation-delay:20s}.mw-parser-output .ani-delay-21{animation-delay:21s}.mw-parser-output .ani-delay-22{animation-delay:22s}.mw-parser-output .ani-delay-23{animation-delay:23s}.mw-parser-output .ani-delay-24{animation-delay:24s}.mw-parser-output .ani-delay-25{animation-delay:25s}.mw-parser-output .ani-delay-26{animation-delay:26s}.mw-parser-output .ani-delay-27{animation-delay:27s}.mw-parser-output .ani-delay-28{animation-delay:28s}.mw-parser-output .ani-delay-29{animation-delay:29s}.mw-parser-output .ani-delay-30{animation-delay:30s}.mw-parser-output .ani-delay-31{animation-delay:31s}.mw-parser-output .ani-delay-32{animation-delay:32s}.mw-parser-output .ani-delay-33{animation-delay:33s}.mw-parser-output .ani-delay-34{animation-delay:34s}.mw-parser-output .ani-delay-35{animation-delay:35s}.mw-parser-output .ani-delay-36{animation-delay:36s}.mw-parser-output .ani-delay-37{animation-delay:37s}.mw-parser-output .ani-delay-38{animation-delay:38s}.mw-parser-output .ani-delay-39{animation-delay:39s}.mw-parser-output .ani-delay-40{animation-delay:40s}.mw-parser-output .ani-delay-41{animation-delay:41s}.mw-parser-output .ani-delay-42{animation-delay:42s}.mw-parser-output .ani-delay-43{animation-delay:43s}.mw-parser-output .ani-delay-44{animation-delay:44s}.mw-parser-output .ani-delay-45{animation-delay:45s}.mw-parser-output .ani-delay-46{animation-delay:46s}.mw-parser-output .ani-delay-47{animation-delay:47s}.mw-parser-output .ani-delay-48{animation-delay:48s}.mw-parser-output .ani-delay-49{animation-delay:49s}.mw-parser-output .ani-delay-50{animation-delay:50s}.mw-parser-output .ani-delay-51{animation-delay:51s}.mw-parser-output .ani-delay-52{animation-delay:52s}.mw-parser-output .ani-delay-53{animation-delay:53s}.mw-parser-output .ani-delay-54{animation-delay:54s}.mw-parser-output .ani-delay-55{animation-delay:55s}.mw-parser-output .ani-delay-56{animation-delay:56s}.mw-parser-output .ani-delay-57{animation-delay:57s}.mw-parser-output .ani-delay-58{animation-delay:58s}.mw-parser-output .ani-delay-59{animation-delay:59s}.mw-parser-output .ani-delay-60{animation-delay:60s}.mw-parser-output .ani-hide{animation-name:hide}@keyframes hide{from{opacity:1}to{opacity:0}}.mw-parser-output .ani-appear{animation-name:appear}@keyframes appear{from{opacity:0}to{opacity:1}}.mw-parser-output .ani-hta{animation-name:hidetoappear}@keyframes hidetoappear{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.mw-parser-output .ani-ath{animation-name:appeartohide}@keyframes appeartohide{0%{opacity:1}50%{opacity:0}100%{opacity:1}}.mw-parser-output .ani-move-ltr{animation-name:move-ltr}@keyframes move-ltr{from{margin-left:calc(0%)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-1{animation-name:move-ltr-1}@keyframes move-ltr-1{from{margin-left:calc(0% - 30px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-2{animation-name:move-ltr-2}@keyframes move-ltr-2{from{margin-left:calc(0% - 60px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-3{animation-name:move-ltr-3}@keyframes move-ltr-3{from{margin-left:calc(0% - 90px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-4{animation-name:move-ltr-4}@keyframes move-ltr-4{from{margin-left:calc(0% - 120px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-5{animation-name:move-ltr-5}@keyframes move-ltr-5{from{margin-left:calc(0% - 150px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-6{animation-name:move-ltr-6}@keyframes move-ltr-6{from{margin-left:calc(0% - 180px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-7{animation-name:move-ltr-7}@keyframes move-ltr-7{from{margin-left:calc(0% - 210px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-8{animation-name:move-ltr-8}@keyframes move-ltr-8{from{margin-left:calc(0% - 240px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-9{animation-name:move-ltr-9}@keyframes move-ltr-9{from{margin-left:calc(0% - 270px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-10{animation-name:move-ltr-10}@keyframes move-ltr-10{from{margin-left:calc(0% - 300px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-11{animation-name:move-ltr-11}@keyframes move-ltr-11{from{margin-left:calc(0% - 330px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-12{animation-name:move-ltr-12}@keyframes move-ltr-12{from{margin-left:calc(0% - 360px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-13{animation-name:move-ltr-13}@keyframes move-ltr-13{from{margin-left:calc(0% - 390px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-14{animation-name:move-ltr-14}@keyframes move-ltr-14{from{margin-left:calc(0% - 420px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-15{animation-name:move-ltr-15}@keyframes move-ltr-15{from{margin-left:calc(0% - 450px)}to{margin-left:100%}}.mw-parser-output .ani-move-ltr-16{animation-name:move-ltr-16}@keyframes move-ltr-16{from{margin-left:calc(0% - 480px)}to{margin-left:100%}}.mw-parser-output .ani-move-rtl{animation-name:move-rtl}@keyframes move-rtl{from{margin-left:100%}to{margin-left:calc(0%)}}.mw-parser-output .ani-move-rtl-1{animation-name:move-rtl-1}@keyframes move-rtl-1{from{margin-left:100%}to{margin-left:calc(0% - 30px)}}.mw-parser-output .ani-move-rtl-2{animation-name:move-rtl-2}@keyframes move-rtl-2{from{margin-left:100%}to{margin-left:calc(0% - 60px)}}.mw-parser-output .ani-move-rtl-3{animation-name:move-rtl-3}@keyframes move-rtl-3{from{margin-left:100%}to{margin-left:calc(0% - 90px)}}.mw-parser-output .ani-move-rtl-4{animation-name:move-rtl-4}@keyframes move-rtl-4{from{margin-left:100%}to{margin-left:calc(0% - 120px)}}.mw-parser-output .ani-move-rtl-5{animation-name:move-rtl-5}@keyframes move-rtl-5{from{margin-left:100%}to{margin-left:calc(0% - 150px)}}.mw-parser-output .ani-move-rtl-6{animation-name:move-rtl-6}@keyframes move-rtl-6{from{margin-left:100%}to{margin-left:calc(0% - 180px)}}.mw-parser-output .ani-move-rtl-7{animation-name:move-rtl-7}@keyframes move-rtl-7{from{margin-left:100%}to{margin-left:calc(0% - 210px)}}.mw-parser-output .ani-move-rtl-8{animation-name:move-rtl-8}@keyframes move-rtl-8{from{margin-left:100%}to{margin-left:calc(0% - 240px)}}.mw-parser-output .ani-move-rtl-9{animation-name:move-rtl-9}@keyframes move-rtl-9{from{margin-left:100%}to{margin-left:calc(0% - 270px)}}.mw-parser-output .ani-move-rtl-10{animation-name:move-rtl-10}@keyframes move-rtl-10{from{margin-left:100%}to{margin-left:calc(0% - 300px)}}.mw-parser-output .ani-move-rtl-11{animation-name:move-rtl-11}@keyframes move-rtl-11{from{margin-left:100%}to{margin-left:calc(0% - 330px)}}.mw-parser-output .ani-move-rtl-12{animation-name:move-rtl-12}@keyframes move-rtl-12{from{margin-left:100%}to{margin-left:calc(0% - 360px)}}.mw-parser-output .ani-move-rtl-13{animation-name:move-rtl-13}@keyframes move-rtl-13{from{margin-left:100%}to{margin-left:calc(0% - 390px)}}.mw-parser-output .ani-move-rtl-14{animation-name:move-rtl-14}@keyframes move-rtl-14{from{margin-left:100%}to{margin-left:calc(0% - 420px)}}.mw-parser-output .ani-move-rtl-15{animation-name:move-rtl-15}@keyframes move-rtl-15{from{margin-left:100%}to{margin-left:calc(0% - 450px)}}.mw-parser-output .ani-move-rtl-16{animation-name:move-rtl-16}@keyframes move-rtl-16{from{margin-left:100%}to{margin-left:calc(0% - 480px)}}.mw-parser-output .ani-move-ltl{animation-name:move-ltl}@keyframes move-ltl{50%{margin-left:0%}50%{margin-left:100%}100%{margin-left:0%}}.mw-parser-output .ani-move-ltl-1{animation-name:move-ltl-1}@keyframes move-ltl-1{0%{margin-left:calc(0% - 30px)}50%{margin-left:100%}100%{margin-left:calc(0% - 30px)}}.mw-parser-output .ani-move-ltl-2{animation-name:move-ltl-2}@keyframes move-ltl-2{0%{margin-left:calc(0% - 60px)}50%{margin-left:100%}100%{margin-left:calc(0% - 60px)}}.mw-parser-output .ani-move-ltl-3{animation-name:move-ltl-3}@keyframes move-ltl-3{0%{margin-left:calc(0% - 90px)}50%{margin-left:100%}100%{margin-left:calc(0% - 90px)}}.mw-parser-output .ani-move-ltl-4{animation-name:move-ltl-4}@keyframes move-ltl-4{0%{margin-left:calc(0% - 120px)}50%{margin-left:100%}100%{margin-left:calc(0% - 120px)}}.mw-parser-output .ani-move-ltl-5{animation-name:move-ltl-5}@keyframes move-ltl-5{0%{margin-left:calc(0% - 150px)}50%{margin-left:100%}100%{margin-left:calc(0% - 150px)}}.mw-parser-output .ani-move-ltl-6{animation-name:move-ltl-6}@keyframes move-ltl-6{0%{margin-left:calc(0% - 180px)}50%{margin-left:100%}100%{margin-left:calc(0% - 180px)}}.mw-parser-output .ani-move-ltl-7{animation-name:move-ltl-7}@keyframes move-ltl-7{0%{margin-left:calc(0% - 210px)}50%{margin-left:100%}100%{margin-left:calc(0% - 210px)}}.mw-parser-output .ani-move-ltl-8{animation-name:move-ltl-8}@keyframes move-ltl-8{0%{margin-left:calc(0% - 240px)}50%{margin-left:100%}100%{margin-left:calc(0% - 240px)}}.mw-parser-output .ani-move-ltl-9{animation-name:move-ltl-9}@keyframes move-ltl-9{0%{margin-left:calc(0% - 270px)}50%{margin-left:100%}100%{margin-left:calc(0% - 270px)}}.mw-parser-output .ani-move-ltl-10{animation-name:move-ltl-10}@keyframes move-ltl-10{0%{margin-left:calc(0% - 300px)}50%{margin-left:100%}100%{margin-left:calc(0% - 300px)}}.mw-parser-output .ani-move-ltl-11{animation-name:move-ltl-11}@keyframes move-ltl-11{0%{margin-left:calc(0% - 330px)}50%{margin-left:100%}100%{margin-left:calc(0% - 330px)}}.mw-parser-output .ani-move-ltl-12{animation-name:move-ltl-12}@keyframes move-ltl-12{0%{margin-left:calc(0% - 360px)}50%{margin-left:100%}100%{margin-left:calc(0% - 360px)}}.mw-parser-output .ani-move-ltl-13{animation-name:move-ltl-13}@keyframes move-ltl-13{0%{margin-left:calc(0% - 390px)}50%{margin-left:100%}100%{margin-left:calc(0% - 390px)}}.mw-parser-output .ani-move-ltl-14{animation-name:move-ltl-14}@keyframes move-ltl-14{0%{margin-left:calc(0% - 420px)}50%{margin-left:100%}100%{margin-left:calc(0% - 420px)}}.mw-parser-output .ani-move-ltl-15{animation-name:move-ltl-15}@keyframes move-ltl-15{0%{margin-left:calc(0% - 450px)}50%{margin-left:100%}100%{margin-left:calc(0% - 450px)}}.mw-parser-output .ani-move-ltl-16{animation-name:move-ltl-16}@keyframes move-ltl-16{0%{margin-left:calc(0% - 480px)}50%{margin-left:100%}100%{margin-left:calc(0% - 480px)}}.mw-parser-output .ani-move-rtr{animation-name:move-rtr}@keyframes move-rtr{0%{margin-left:100%}50%{margin-left:0%}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-1{animation-name:move-rtr-1}@keyframes move-rtr-1{0%{margin-left:100%}50%{margin-left:calc(0% - 30px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-2{animation-name:move-rtr-2}@keyframes move-rtr-2{0%{margin-left:100%}50%{margin-left:calc(0% - 60px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-3{animation-name:move-rtr-3}@keyframes move-rtr-3{0%{margin-left:100%}50%{margin-left:calc(0% - 90px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-4{animation-name:move-rtr-4}@keyframes move-rtr-4{0%{margin-left:100%}50%{margin-left:calc(0% - 120px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-5{animation-name:move-rtr-5}@keyframes move-rtr-5{0%{margin-left:100%}50%{margin-left:calc(0% - 150px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-6{animation-name:move-rtr-6}@keyframes move-rtr-6{0%{margin-left:100%}50%{margin-left:calc(0% - 180px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-7{animation-name:move-rtr-7}@keyframes move-rtr-7{0%{margin-left:100%}50%{margin-left:calc(0% - 210px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-8{animation-name:move-rtr-8}@keyframes move-rtr-8{0%{margin-left:100%}50%{margin-left:calc(0% - 240px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-9{animation-name:move-rtr-9}@keyframes move-rtr-9{0%{margin-left:100%}50%{margin-left:calc(0% - 270px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-10{animation-name:move-rtr-10}@keyframes move-rtr-10{0%{margin-left:100%}50%{margin-left:calc(0% - 300px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-11{animation-name:move-rtr-11}@keyframes move-rtr-11{0%{margin-left:100%}50%{margin-left:calc(0% - 330px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-12{animation-name:move-rtr-12}@keyframes move-rtr-12{0%{margin-left:100%}50%{margin-left:calc(0% - 360px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-13{animation-name:move-rtr-13}@keyframes move-rtr-13{0%{margin-left:100%}50%{margin-left:calc(0% - 390px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-14{animation-name:move-rtr-14}@keyframes move-rtr-14{0%{margin-left:100%}50%{margin-left:calc(0% - 420px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-15{animation-name:move-rtr-15}@keyframes move-rtr-15{0%{margin-left:100%}50%{margin-left:calc(0% - 450px)}100%{margin-left:100%}}.mw-parser-output .ani-move-rtr-16{animation-name:move-rtr-16}@keyframes move-rtr-16{0%{margin-left:100%}50%{margin-left:calc(0% - 480px)}100%{margin-left:100%}}.mw-parser-output .ani-move-exltl-1{animation-name:move-exltl-1}@keyframes move-exltl-1{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 30px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-2{animation-name:move-exltl-2}@keyframes move-exltl-2{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 60px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-3{animation-name:move-exltl-3}@keyframes move-exltl-3{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 90px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-4{animation-name:move-exltl-4}@keyframes move-exltl-4{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 120px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-5{animation-name:move-exltl-5}@keyframes move-exltl-5{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 150px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-6{animation-name:move-exltl-6}@keyframes move-exltl-6{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 180px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-7{animation-name:move-exltl-7}@keyframes move-exltl-7{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 210px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-8{animation-name:move-exltl-8}@keyframes move-exltl-8{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 240px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-9{animation-name:move-exltl-9}@keyframes move-exltl-9{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 270px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-10{animation-name:move-exltl-10}@keyframes move-exltl-10{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 300px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-11{animation-name:move-exltl-11}@keyframes move-exltl-11{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 330px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-12{animation-name:move-exltl-12}@keyframes move-exltl-12{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 360px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-13{animation-name:move-exltl-13}@keyframes move-exltl-13{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 390px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-14{animation-name:move-exltl-14}@keyframes move-exltl-14{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 420px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-15{animation-name:move-exltl-15}@keyframes move-exltl-15{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 450px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exltl-16{animation-name:move-exltl-16}@keyframes move-exltl-16{0%{margin-left:calc(0%)}50%{margin-left:calc(100% - 480px)}100%{margin-left:calc(0%)}}.mw-parser-output .ani-move-exrtr-1{animation-name:move-exrtr-1}@keyframes move-exrtr-1{0%{margin-left:calc(100% - 30px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 30px)}}.mw-parser-output .ani-move-exrtr-2{animation-name:move-exrtr-2}@keyframes move-exrtr-2{0%{margin-left:calc(100% - 60px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 60px)}}.mw-parser-output .ani-move-exrtr-3{animation-name:move-exrtr-3}@keyframes move-exrtr-3{0%{margin-left:calc(100% - 90px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 90px)}}.mw-parser-output .ani-move-exrtr-4{animation-name:move-exrtr-4}@keyframes move-exrtr-4{0%{margin-left:calc(100% - 120px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 120px)}}.mw-parser-output .ani-move-exrtr-5{animation-name:move-exrtr-5}@keyframes move-exrtr-5{0%{margin-left:calc(100% - 150px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 150px)}}.mw-parser-output .ani-move-exrtr-6{animation-name:move-exrtr-6}@keyframes move-exrtr-6{0%{margin-left:calc(100% - 180px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 180px)}}.mw-parser-output .ani-move-exrtr-7{animation-name:move-exrtr-7}@keyframes move-exrtr-7{0%{margin-left:calc(100% - 210px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 210px)}}.mw-parser-output .ani-move-exrtr-8{animation-name:move-exrtr-8}@keyframes move-exrtr-8{0%{margin-left:calc(100% - 240px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 240px)}}.mw-parser-output .ani-move-exrtr-9{animation-name:move-exrtr-9}@keyframes move-exrtr-9{0%{margin-left:calc(100% - 270px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 270px)}}.mw-parser-output .ani-move-exrtr-10{animation-name:move-exrtr-10}@keyframes move-exrtr-10{0%{margin-left:calc(100% - 300px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 300px)}}.mw-parser-output .ani-move-exrtr-11{animation-name:move-exrtr-11}@keyframes move-exrtr-11{0%{margin-left:calc(100% - 330px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 330px)}}.mw-parser-output .ani-move-exrtr-12{animation-name:move-exrtr-12}@keyframes move-exrtr-12{0%{margin-left:calc(100% - 360px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 360px)}}.mw-parser-output .ani-move-exrtr-13{animation-name:move-exrtr-13}@keyframes move-exrtr-13{0%{margin-left:calc(100% - 390px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 390px)}}.mw-parser-output .ani-move-exrtr-14{animation-name:move-exrtr-14}@keyframes move-exrtr-14{0%{margin-left:calc(100% - 420px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 420px)}}.mw-parser-output .ani-move-exrtr-15{animation-name:move-exrtr-15}@keyframes move-exrtr-15{0%{margin-left:calc(100% - 450px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 450px)}}.mw-parser-output .ani-move-exrtr-16{animation-name:move-exrtr-16}@keyframes move-exrtr-16{0%{margin-left:calc(100% - 480px)}50%{margin-left:calc(0%)}100%{margin-left:calc(100% - 480px)}}.mw-parser-output .ani-rotate10{animation-name:rotate10}@keyframes rotate10{from{transform:rotate(0deg)}to{transform:rotate(10deg)}}.mw-parser-output .ani-rotate20{animation-name:rotate20}@keyframes rotate20{from{transform:rotate(0deg)}to{transform:rotate(20deg)}}.mw-parser-output .ani-rotate30{animation-name:rotate30}@keyframes rotate30{from{transform:rotate(0deg)}to{transform:rotate(30deg)}}.mw-parser-output .ani-rotate40{animation-name:rotate40}@keyframes rotate40{from{transform:rotate(0deg)}to{transform:rotate(40deg)}}.mw-parser-output .ani-rotate45{animation-name:rotate45}@keyframes rotate45{from{transform:rotate(0deg)}to{transform:rotate(45deg)}}.mw-parser-output .ani-rotate50{animation-name:rotate50}@keyframes rotate50{from{transform:rotate(0deg)}to{transform:rotate(50deg)}}.mw-parser-output .ani-rotate60{animation-name:rotate60}@keyframes rotate60{from{transform:rotate(0deg)}to{transform:rotate(60deg)}}.mw-parser-output .ani-rotate70{animation-name:rotate70}@keyframes rotate70{from{transform:rotate(0deg)}to{transform:rotate(70deg)}}.mw-parser-output .ani-rotate80{animation-name:rotate80}@keyframes rotate80{from{transform:rotate(0deg)}to{transform:rotate(80deg)}}.mw-parser-output .ani-rotate90{animation-name:rotate90}@keyframes rotate90{from{transform:rotate(0deg)}to{transform:rotate(90deg)}}.mw-parser-output .ani-rotate180{animation-name:rotate180}@keyframes rotate180{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}.mw-parser-output .ani-rotate270{animation-name:rotate270}@keyframes rotate270{from{transform:rotate(0deg)}to{transform:rotate(270deg)}}.mw-parser-output .ani-rotate360{animation-name:rotate360}@keyframes rotate360{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.mw-parser-output .ani-rotate-10{animation-name:rotate-10}@keyframes rotate-10{from{transform:rotate(0deg)}to{transform:rotate(-10deg)}}.mw-parser-output .ani-rotate-20{animation-name:rotate-20}@keyframes rotate-20{from{transform:rotate(0deg)}to{transform:rotate(-20deg)}}.mw-parser-output .ani-rotate-30{animation-name:rotate-30}@keyframes rotate-30{from{transform:rotate(0deg)}to{transform:rotate(-30deg)}}.mw-parser-output .ani-rotate-40{animation-name:rotate-40}@keyframes rotate-40{from{transform:rotate(0deg)}to{transform:rotate(-40deg)}}.mw-parser-output .ani-rotate-45{animation-name:rotate-45}@keyframes rotate-45{from{transform:rotate(0deg)}to{transform:rotate(-45deg)}}.mw-parser-output .ani-rotate-50{animation-name:rotate-50}@keyframes rotate-50{from{transform:rotate(0deg)}to{transform:rotate(-50deg)}}.mw-parser-output .ani-rotate-60{animation-name:rotate-60}@keyframes rotate-60{from{transform:rotate(0deg)}to{transform:rotate(-60deg)}}.mw-parser-output .ani-rotate-70{animation-name:rotate-70}@keyframes rotate-70{from{transform:rotate(0deg)}to{transform:rotate(-70deg)}}.mw-parser-output .ani-rotate-80{animation-name:rotate-80}@keyframes rotate-80{from{transform:rotate(0deg)}to{transform:rotate(-80deg)}}.mw-parser-output .ani-rotate-90{animation-name:rotate-90}@keyframes rotate-90{from{transform:rotate(0deg)}to{transform:rotate(-90deg)}}.mw-parser-output .ani-rotate-180{animation-name:rotate-180}@keyframes rotate-180{from{transform:rotate(0deg)}to{transform:rotate(-180deg)}}.mw-parser-output .ani-rotate-270{animation-name:rotate-270}@keyframes rotate-270{from{transform:rotate(0deg)}to{transform:rotate(-270deg)}}.mw-parser-output .ani-rotate-360{animation-name:rotate-360}@keyframes rotate-360{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}.mw-parser-output .ani-rotate10-re{animation-name:rotate10-re}@keyframes rotate10-re{0%{transform:rotate(0deg)}50%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate20-re{animation-name:rotate20-re}@keyframes rotate20-re{0%{transform:rotate(0deg)}50%{transform:rotate(20deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate30-re{animation-name:rotate30-re}@keyframes rotate30-re{0%{transform:rotate(0deg)}50%{transform:rotate(30deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate40-re{animation-name:rotate40-re}@keyframes rotate40-re{0%{transform:rotate(0deg)}50%{transform:rotate(40deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate45-re{animation-name:rotate45-re}@keyframes rotate45-re{0%{transform:rotate(0deg)}50%{transform:rotate(45deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate50-re{animation-name:rotate50-re}@keyframes rotate50-re{0%{transform:rotate(0deg)}50%{transform:rotate(50deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate60-re{animation-name:rotate60-re}@keyframes rotate60-re{0%{transform:rotate(0deg)}50%{transform:rotate(60deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate70-re{animation-name:rotate70-re}@keyframes rotate70-re{0%{transform:rotate(0deg)}50%{transform:rotate(70deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate80-re{animation-name:rotate80-re}@keyframes rotate80-re{0%{transform:rotate(0deg)}50%{transform:rotate(80deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate90-re{animation-name:rotate90-re}@keyframes rotate90-re{0%{transform:rotate(0deg)}50%{transform:rotate(90deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate180-re{animation-name:rotate180-re}@keyframes rotate180-re{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate270-re{animation-name:rotate270-re}@keyframes rotate270-re{0%{transform:rotate(0deg)}50%{transform:rotate(270deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate360-re{animation-name:rotate360-re}@keyframes rotate360-re{0%{transform:rotate(0deg)}50%{transform:rotate(360deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-10-re{animation-name:rotate-10-re}@keyframes rotate-10-re{0%{transform:rotate(0deg)}50%{transform:rotate(-10deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-20-re{animation-name:rotate-20-re}@keyframes rotate-20-re{0%{transform:rotate(0deg)}50%{transform:rotate(-20deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-30-re{animation-name:rotate-30-re}@keyframes rotate-30-re{0%{transform:rotate(0deg)}50%{transform:rotate(-30deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-40-re{animation-name:rotate-40-re}@keyframes rotate-40-re{0%{transform:rotate(0deg)}50%{transform:rotate(-40deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-45-re{animation-name:rotate-45-re}@keyframes rotate-45-re{0%{transform:rotate(0deg)}50%{transform:rotate(-45deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-50-re{animation-name:rotate-50-re}@keyframes rotate-50-re{0%{transform:rotate(0deg)}50%{transform:rotate(-50deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-60-re{animation-name:rotate-60-re}@keyframes rotate-60-re{0%{transform:rotate(0deg)}50%{transform:rotate(-60deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-70-re{animation-name:rotate-70-re}@keyframes rotate-70-re{0%{transform:rotate(0deg)}50%{transform:rotate(-70deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-80-re{animation-name:rotate-80-re}@keyframes rotate-80-re{0%{transform:rotate(0deg)}50%{transform:rotate(-80deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-90-re{animation-name:rotate-90-re}@keyframes rotate-90-re{0%{transform:rotate(0deg)}50%{transform:rotate(-90deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-180-re{animation-name:rotate-180-re}@keyframes rotate-180-re{0%{transform:rotate(0deg)}50%{transform:rotate(-180deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-270-re{animation-name:rotate-270-re}@keyframes rotate-270-re{0%{transform:rotate(0deg)}50%{transform:rotate(-270deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotate-360-re{animation-name:rotate-360-re}@keyframes rotate-360-re{0%{transform:rotate(0deg)}50%{transform:rotate(-360deg)}100%{transform:rotate(0deg)}}.mw-parser-output .ani-rotateY160{animation-name:rotateY160}@keyframes rotateY160{0%{transform:rotateY(0deg)}100%{transform:rotateY(160deg)}}.mw-parser-output .ani-rotateY-160{animation-name:rotateY-160}@keyframes rotateY-160{0%{transform:rotateY(0deg)}100%{transform:rotateY(-160deg)}}.mw-parser-output .ani-zoom-out{animation-name:zoom-out}@keyframes zoom-out{0%{transform:scale(1,1)}100%{transform:scale(2,2)}}.mw-parser-output .ani-zoom-out3{animation-name:zoom-out3}@keyframes zoom-out3{0%{transform:scale(1,1)}100%{transform:scale(3,3)}}.mw-parser-output .ani-zoom-out4{animation-name:zoom-out4}@keyframes zoom-out4{0%{transform:scale(1,1)}100%{transform:scale(4,4)}}.mw-parser-output .ani-zoom-out5{animation-name:zoom-out5}@keyframes zoom-out5{0%{transform:scale(1,1)}100%{transform:scale(5,5)}}.mw-parser-output .ani-zoom-out6{animation-name:zoom-out6}@keyframes zoom-out4{0%{transform:scale(1,1)}100%{transform:scale(6,6)}}.mw-parser-output .ani-zoom-out7{animation-name:zoom-out7}@keyframes zoom-out7{0%{transform:scale(1,1)}100%{transform:scale(7,7)}}.mw-parser-output .ani-zoom-out8{animation-name:zoom-out8}@keyframes zoom-out8{0%{transform:scale(1,1)}100%{transform:scale(8,8)}}.mw-parser-output .ani-zoom-out9{animation-name:zoom-out9}@keyframes zoom-out9{0%{transform:scale(1,1)}100%{transform:scale(9,9)}}.mw-parser-output .ani-zoom-out10{animation-name:zoom-out10}@keyframes zoom-out10{0%{transform:scale(1,1)}100%{transform:scale(10,10)}}.mw-parser-output .ani-zoom-out11{animation-name:zoom-out11}@keyframes zoom-out11{0%{transform:scale(1,1)}100%{transform:scale(11,11)}}.mw-parser-output .ani-zoom-outin{animation-name:zoom-outin}@keyframes zoom-outin{0%{transform:scale(1,1)}50%{transform:scale(2,2)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin3{animation-name:zoom-outin3}@keyframes zoom-outin3{0%{transform:scale(1,1)}50%{transform:scale(3,3)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin4{animation-name:zoom-outin4}@keyframes zoom-outin4{0%{transform:scale(1,1)}50%{transform:scale(4,4)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin5{animation-name:zoom-outin5}@keyframes zoom-outin5{0%{transform:scale(1,1)}50%{transform:scale(5,5)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin6{animation-name:zoom-outin6}@keyframes zoom-outin6{0%{transform:scale(1,1)}50%{transform:scale(6,6)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin7{animation-name:zoom-outin7}@keyframes zoom-outin7{0%{transform:scale(1,1)}50%{transform:scale(7,7)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin8{animation-name:zoom-outin8}@keyframes zoom-outin8{0%{transform:scale(1,1)}50%{transform:scale(8,8)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin9{animation-name:zoom-outin9}@keyframes zoom-outin9{0%{transform:scale(1,1)}50%{transform:scale(9,9)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin10{animation-name:zoom-outin10}@keyframes zoom-outin10{0%{transform:scale(1,1)}50%{transform:scale(10,10)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-outin11{animation-name:zoom-outin11}@keyframes zoom-outin11{0%{transform:scale(1,1)}50%{transform:scale(11,11)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-in01{animation-name:zoom-in01}@keyframes zoom-in01{0%{transform:scale(1,1)}100%{transform:scale(0.1,0.1)}}.mw-parser-output .ani-zoom-in02{animation-name:zoom-in02}@keyframes zoom-in02{0%{transform:scale(1,1)}100%{transform:scale(0.2,0.2)}}.mw-parser-output .ani-zoom-in03{animation-name:zoom-in03}@keyframes zoom-in03{0%{transform:scale(1,1)}100%{transform:scale(0.3,0.3)}}.mw-parser-output .ani-zoom-in04{animation-name:zoom-in04}@keyframes zoom-in04{0%{transform:scale(1,1)}100%{transform:scale(0.4,0.4)}}.mw-parser-output .ani-zoom-in{animation-name:zoom-in}@keyframes zoom-in{0%{transform:scale(1,1)}100%{transform:scale(0.5,0.5)}}.mw-parser-output .ani-zoom-in06{animation-name:zoom-in06}@keyframes zoom-in06{0%{transform:scale(1,1)}100%{transform:scale(0.6,0.6)}}.mw-parser-output .ani-zoom-in07{animation-name:zoom-in07}@keyframes zoom-in07{0%{transform:scale(1,1)}100%{transform:scale(0.7,0.7)}}.mw-parser-output .ani-zoom-in08{animation-name:zoom-in08}@keyframes zoom-in08{0%{transform:scale(1,1)}100%{transform:scale(0.8,0.8)}}.mw-parser-output .ani-zoom-in09{animation-name:zoom-in09}@keyframes zoom-in09{0%{transform:scale(1,1)}100%{transform:scale(0.9,0.9)}}.mw-parser-output .ani-zoom-inout01{animation-name:zoom-inout01}@keyframes zoom-inout01{0%{transform:scale(1,1)}50%{transform:scale(0.1,0.1)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout02{animation-name:zoom-inout02}@keyframes zoom-inout02{0%{transform:scale(1,1)}50%{transform:scale(0.2,0.2)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout03{animation-name:zoom-inout03}@keyframes zoom-inout03{0%{transform:scale(1,1)}50%{transform:scale(0.3,0.3)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout04{animation-name:zoom-inout04}@keyframes zoom-inout04{0%{transform:scale(1,1)}50%{transform:scale(0.4,0.4)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout{animation-name:zoom-inout}@keyframes zoom-inout{0%{transform:scale(1,1)}50%{transform:scale(0.5,0.5)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout06{animation-name:zoom-inout06}@keyframes zoom-inout06{0%{transform:scale(1,1)}50%{transform:scale(0.6,0.6)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout07{animation-name:zoom-inout07}@keyframes zoom-inout07{0%{transform:scale(1,1)}50%{transform:scale(0.7,0.7)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout08{animation-name:zoom-inout08}@keyframes zoom-inout08{0%{transform:scale(1,1)}50%{transform:scale(0.8,0.8)}100%{transform:scale(1,1)}}.mw-parser-output .ani-zoom-inout09{animation-name:zoom-inout09}@keyframes zoom-inout09{0%{transform:scale(1,1)}50%{transform:scale(0.9,0.9)}100%{transform:scale(1,1)}}.mw-parser-output .ani-rg{animation-name:ani-rg}@keyframes ani-rg{0%{color:red}50%{color:green}100%{color:red}}.mw-parser-output .ani-rb{animation-name:ani-rb}@keyframes ani-rb{0%{color:red}50%{color:blue}100%{color:red}}.mw-parser-output .ani-gr{animation-name:ani-gr}@keyframes ani-gr{0%{color:green}50%{color:red}100%{color:green}}.mw-parser-output .ani-gb{animation-name:ani-gb}@keyframes ani-gb{0%{color:green}50%{color:blue}100%{color:green}}.mw-parser-output .ani-br{animation-name:ani-br}@keyframes ani-br{0%{color:blue}50%{color:red}100%{color:blue}}.mw-parser-output .ani-bg{animation-name:ani-bg}@keyframes ani-bg{0%{color:blue}50%{color:green}100%{color:blue}}.mw-parser-output .ani-rg0{animation-name:ani-rg0}@keyframes ani-rg0{0%{color:red}33%{color:green}66%{color:transparent}100%{color:red}}.mw-parser-output .ani-rb0{animation-name:ani-rb0}@keyframes ani-rb0{0%{color:red}33%{color:blue}66%{color:transparent}100%{color:red}}.mw-parser-output .ani-gr0{animation-name:ani-gr0}@keyframes ani-gr0{0%{color:green}33%{color:red}66%{color:transparent}100%{color:green}}.mw-parser-output .ani-gb0{animation-name:ani-gb0}@keyframes ani-gb0{0%{color:green}33%{color:blue}66%{color:transparent}100%{color:green}}.mw-parser-output .ani-br0{animation-name:ani-br0}@keyframes ani-br0{0%{color:blue}33%{color:red}66%{color:transparent}100%{color:blue}}.mw-parser-output .ani-bg0{animation-name:ani-bg0}@keyframes ani-bg0{0%{color:blue}33%{color:green}66%{color:transparent}100%{color:blue}}.mw-parser-output .ani-rgb{animation-name:ani-rgb}@keyframes ani-rgb{0%{color:red}33%{color:green}66%{color:blue}100%{color:red}}.mw-parser-output .ani-rbg{animation-name:ani-rbg}@keyframes ani-rbg{0%{color:red}33%{color:blue}66%{color:green}100%{color:red}}.mw-parser-output .ani-grb{animation-name:ani-grb}@keyframes ani-grb{0%{color:green}33%{color:red}66%{color:blue}100%{color:green}}.mw-parser-output .ani-gbr{animation-name:ani-gbr}@keyframes ani-gbr{0%{color:green}33%{color:blue}66%{color:red}100%{color:green}}.mw-parser-output .ani-brg{animation-name:ani-brg}@keyframes ani-brg{0%{color:blue}33%{color:red}66%{color:green}100%{color:blue}}.mw-parser-output .ani-bgr{animation-name:ani-bgr}@keyframes ani-bgr{0%{color:blue}33%{color:green}66%{color:red}100%{color:blue}}.mw-parser-output .ani-rgb0{animation-name:ani-rgb0}@keyframes ani-rgb0{0%{color:red}25%{color:green}50%{color:blue}75%{color:transparent}100%{color:red}}.mw-parser-output .ani-rbg0{animation-name:ani-rbg0}@keyframes ani-rbg0{0%{color:red}25%{color:blue}50%{color:green}75%{color:transparent}100%{color:red}}.mw-parser-output .ani-grb0{animation-name:ani-grb0}@keyframes ani-grb0{0%{color:green}25%{color:red}50%{color:blue}75%{color:transparent}100%{color:green}}.mw-parser-output .ani-gbr0{animation-name:ani-gbr0}@keyframes ani-gbr0{0%{color:green}25%{color:blue}50%{color:red}75%{color:transparent}100%{color:green}}.mw-parser-output .ani-brg0{animation-name:ani-brg0}@keyframes ani-brg0{0%{color:blue}25%{color:red}50%{color:green}75%{color:transparent}100%{color:blue}}.mw-parser-output .ani-bgr0{animation-name:ani-bgr0}@keyframes ani-bgr0{0%{color:blue}25%{color:green}50%{color:red}75%{color:transparent}100%{color:blue}}.mw-parser-output .ani-r0g0{animation-name:ani-r0g0}@keyframes ani-r0g0{0%{color:red}25%{color:transparent}50%{color:green}75%{color:transparent}100%{color:red}}.mw-parser-output .ani-r0b0{animation-name:ani-r0b0}@keyframes ani-r0b0{0%{color:red}25%{color:transparent}50%{color:blue}75%{color:transparent}100%{color:red}}.mw-parser-output .ani-g0r0{animation-name:ani-g0r0}@keyframes ani-g0r0{0%{color:green}25%{color:transparent}50%{color:red}75%{color:transparent}100%{color:green}}.mw-parser-output .ani-g0b0{animation-name:ani-g0b0}@keyframes ani-g0b0{0%{color:green}25%{color:transparent}50%{color:blue}75%{color:transparent}100%{color:green}}.mw-parser-output .ani-b0r0{animation-name:ani-b0r0}@keyframes ani-b0r0{0%{color:blue}25%{color:transparent}50%{color:red}75%{color:transparent}100%{color:blue}}.mw-parser-output .ani-b0g0{animation-name:ani-b0g0}@keyframes ani-b0g0{0%{color:blue}25%{color:transparent}50%{color:green}75%{color:transparent}100%{color:blue}}.mw-parser-output .spbgred{animation-name:spbgred-blue}@keyframes spbgred-blue{0%{background:red;transform:scale(0.3,0.3)}33%{background:green;transform:scale(0.6,0.6)translateY(50px)}66%{background:blue;transform:scale(0.9,0.9);border-radius:50%}100%{background:#fff;transform:scale(0.8,0.8)translateY(150px)}}

{{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 
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  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 
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：同时具有两种属性。

例子

@-moz-keyframes loading {
0%, 100% {
-moz-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
opacity: 1;
}

26% {
-moz-transform: scale(1.1) rotateZ(12deg);
transform: scale(1.1) rotateZ(12deg);
opacity: .2;
}

76% {
-moz-transform: scale(0.8) rotateZ(-8deg);
transform: scale(0.8) rotateZ(-8deg);
opacity: .6;
}
}
@-webkit-keyframes loading {
0%, 100% {
-webkit-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
opacity: 1;
}

26% {
-webkit-transform: scale(1.1) rotateZ(12deg);
transform: scale(1.1) rotateZ(12deg);
opacity: .2;
}

76% {
-webkit-transform: scale(0.8) rotateZ(-8deg);
transform: scale(0.8) rotateZ(-8deg);
opacity: .6;
}
}
@keyframes loading {
0%, 100% {
-moz-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);
-webkit-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
opacity: 1;
}

26% {
-moz-transform: scale(1.1) rotateZ(12deg);
-ms-transform: scale(1.1) rotateZ(12deg);
-webkit-transform: scale(1.1) rotateZ(12deg);
transform: scale(1.1) rotateZ(12deg);
opacity: .2;
}

76% {
-moz-transform: scale(0.8) rotateZ(-8deg);
-ms-transform: scale(0.8) rotateZ(-8deg);
-webkit-transform: scale(0.8) rotateZ(-8deg);
transform: scale(0.8) rotateZ(-8deg);
opacity: .6;
}
}
.loader {
overflow: hidden;
font-size: 45px;
}
.loader span {
-moz-animation: loading 1s linear infinite -0.8s;
-webkit-animation: loading 1s linear infinite -0.8s;
animation: loading 1s linear infinite -0.8s;
display:inline-block;
}
.loader .span2 {
-moz-animation: loading 1s linear infinite -0.2s;
-webkit-animation: loading 1s linear infinite -0.2s;
animation: loading 1s linear infinite -0.2s;
}
.loader .span3 {
-moz-animation: loading 1s linear infinite -0.5s;
-webkit-animation: loading 1s linear infinite -0.5s;
animation: loading 1s linear infinite -0.5s;
}
.loader .span4 {
-moz-animation: loading 1s linear infinite -1.1s;
-webkit-animation: loading 1s linear infinite -1.1s;
animation: loading 1s linear infinite -1.1s;
}
.loader .span5 {
-moz-animation: loading 1s linear infinite -0.36s;
-webkit-animation: loading 1s linear infinite -0.36s;
animation: loading 1s linear infinite -0.36s;
}
.loader .span6 {
-moz-animation: loading 1s linear infinite -0.65s;
-webkit-animation: loading 1s linear infinite -0.65s;
animation: loading 1s linear infinite -0.65s;
}
.loader .span7 {
-moz-animation: loading 1s linear infinite -0.93s;
-webkit-animation: loading 1s linear infinite -0.93s;
animation: loading 1s linear infinite -0.93s;
}红叶

查 · 论 · 编 ACGN作品类型 统述 ACG（ACGN） • 动漫 • 动画 • 漫画 • 游戏 • 轻小说 • 综漫 • 第九艺术 A（动画） 术语 动画 • 电视动画 • 网络动画 • 独立动画 • 动画短片 • 动画电影 • 2D动画 • 3D动画 • 卡通渲染（三渲二） • 伪3D • 定格动画 • 真人-动画 • 赛璐珞动画 • Flash动画 • CSS动画 • 偶动画 • 漫动画（动态漫画） • 戏中戏 • 橡皮管动画 • 竖屏动画 • 水墨动画 • 地域振兴动画 • 动画纪录片 • 动画教育片 • 单元剧 • 连续剧 俗称 新番 • 旧番 • 表番 • 里番 • 肉番 • 基番 • 番剧 • 国创 • 生肉 • 熟肉 • 泡面番 • 尿番 • 憋气番 • 日常番 • 群像剧 • 子供番 • 闭嘴番 • 卖歌番 • 奥运番 • 咖喱番 • 姨妈番 • 霸权番 • 夫妻档 • 僧侣档 • 作中作 C（漫画） 术语 漫画 • 单行本 • 页漫 • 条漫 • 四格漫画 • 绘本漫画 • 动画漫画 • 连环画 • 图像小说 • AA漫画 • 赤本漫画 • 贷本漫画 • 剧画 • 网络漫画 俗称 民工漫 • 暴漫 • 本子 G（游戏） 术语 游戏 • 单机游戏 • 网络游戏 • 手机游戏 • 电脑游戏 • 主机游戏 • 街机游戏 • 桌上游戏 俗称 Galgame • 拔作 • 粪作 • 反人类游戏 N（小说） 术语 小说 • 轻小说 • 轻文学 • 网络小说 • 网络文学 • 有声小说 • 青少年小说 • 儿童文学 俗称 耽美文 • 后宫文 • 穿越文 • 种马文 • 群像文 • 烧脑文 • 爽文 • 小黄文 泛ACGN媒介 术语 MediaMix • 泛娱乐 • 音乐 • 广播剧 • 舞台剧 • 童话剧 • 默剧 • 漫才剧 • 特摄剧 • 布袋戏 • 纸芝居