流行热词百科

网络流行语,网络热词,2022年热点流行语
  1. 首页
  2. 各种梗
  3. 正文

CSS动画的意思是什么

2022年4月13日 8290点热度 113人点赞 0条评论

大约在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意味着不延迟,立即开始。

例子

CSS动画的意思是什么插图

CSS动画的意思是什么插图1

.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)}}

CSS动画的意思是什么插图2

CSS动画的意思是什么插图3

CSS动画的意思是什么插图2

CSS动画的意思是什么插图3

CSS动画的意思是什么插图2

CSS动画的意思是什么插图3

CSS动画的意思是什么插图2

CSS动画的意思是什么插图3

{{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 • 泛娱乐 • 音乐 • 广播剧 • 舞台剧 • 童话剧 • 默剧 • 漫才剧 • 特摄剧 • 布袋戏 • 纸芝居

本文链接:https://www.lxchot.com/41080.html

福利宝 最新热点教程 云服务器 1折特惠
标签: 暂无
最后更新:2022年4月13日

流行热词百科

不断收集更新热门语句词汇,涵盖各大网络平台流行语,在这里你可以Get学习到超多前沿潮流知识,快加入我们一起构建专业百科大全!

点赞
< 上一篇
下一篇 >

文章评论

取消回复
最新 热点 随机
最新 热点 随机
北京到底有谁在啊 蛋饺肉丝 明天下午再说 今晚月色真美 我出生了 ball ball you 阿米驴 冒险家翻抽屉有什么不对 春卷人 砍橘子树 当狗中单 你们的老婆沉了 红茶警告 命韵峋环 黑科技 吃圭人 60e 嘉心糖屁用没有 他说他是岛民 熊孩子 四十米大刀 这集我看过 红浪漫 多谢款待 一个人的全家福 炸洗我了 竹丝炒肉 恶意卖萌 21世纪木乃伊 教科书式
淘宝战士那你报警吧准备药检红茶警告忙都忙忙点好啊运费过敏咱就是说你们的老婆沉了你怎么这个亚子写上林赋得心上人要吃饭的嘛当狗中单耗子喂汁偷雕塑只有我被抓了yyds砍橘子树人类的本质是内卷淘宝战士如果这都不算爱春卷人谢谢甄嬛剁椒鱼头车建国后不许成精冒险家翻抽屉有什么不对快说你是来旅游的孔乙己脱不下的长衫动物之友荒木阿米驴痛太痛了6馍
春哥意思是什么? 问候是什么梗? 粗暴无礼的管制的解释是什么 skr而止梗的意思出处介绍解释是什么? 人己行业是什么梗? 好人代价是什么意思 弯的是什么意思 我懒散的笑容,是你不懂的优雅! MAU意思是什么? 楼上神父别弹了换碟解释是什么? 发饰的解释是什么 郭楠是什么梗? Iris是什么意思 杀必死解释是什么? 中国人的八大原谅的解释是什么 白小律是什么意思 磕炮是什么梗? 吸管的解释是什么 没马是什么梗 广西方言是什么梗 提机忘事的解释是什么 寄是什么梗? 漂亮警告 神棍节的意思是什么 嗯造碳水意思是什么? 范志毅是什么梗 兄弟为手足,女人为衣服。谁动我手足,我扒谁衣服 基操勿6皆坐是什么梗? 竞速游戏的解释是什么 我们是谁解释是什么?
分类
  • 俏皮话
  • 各种梗
  • 小窍门
  • 最新网络新词
  • 综合资讯
  • 网络新词
  • 网络流行语
  • 网络用语
标签聚合
出处 网络语言 网络词汇 大全 流行语 英文 方法 网络流行语 小常识 网络用语 网络 女人 2019 歇后语 爱情 淘宝 网络新词 日语 BE 流行 歌词 adobe 男人 2018 淘宝网 笑话 序列号 小窍门 生活 开店

陕ICP备2021014599号  陕公网安备 61010402000661号


COPYRIGHT © 2021 lxchot.com. ALL RIGHTS RESERVED.