流行热词百科

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

CSS动画的意思是什么

2022年4月13日 7843点热度 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学习到超多前沿潮流知识,快加入我们一起构建专业百科大全!

点赞
< 上一篇
下一篇 >

文章评论

取消回复
最新 热点 随机
最新 热点 随机
绿大暗bot的意思是什么 low娘的解释是什么 阿瓦达砍大瓜的解释是什么 做完核酸可以领豆油的解释是什么 你在无中生有 你在暗渡陈仓 你在凭空想象 你在凭空捏造的意思是什么 接收钢丝球是什么意思 三俗是什么意思 我已经爱上你可你妈不同意的解释是什么 在下叶良辰的意思是什么 高铁体的意思是什么 被自愿是什么梗 榴莲是什么意思 你不是人造革你是真的皮是什么梗 佛系青年是什么意思 ysg的解释是什么 油腻中年的解释是什么 好多丧尸在啃人的意思是什么 想左了是什么梗 沈腾飞是什么梗 人形泰迪的意思是什么 码绿基红是什么意思 刁民模拟器是什么意思 ak战狼是什么梗 这不比博人传燃?的解释是什么 半斤八两是什么梗 压压惊的解释是什么 为人方正的解释是什么 卿晨璟靓是什么意思 铁线虫是什么意思 韦天魔术棒的解释是什么
绿大暗bot的意思是什么高铁体的意思是什么ESJ机翻事件是什么梗手账是什么意思low娘的解释是什么阿瓦达砍大瓜的解释是什么正义的伙伴是什么意思内个的意思是什么大空昴的意思是什么郑州的解释是什么杀人oo的解释是什么你为何这么屌是什么梗无口的解释是什么蝠翼型翅膀的解释是什么脚戒是什么意思最高神是什么梗咬手指的解释是什么招核男儿的意思是什么孩子很喜欢的解释是什么TNK是什么意思桥本的解释是什么什么图瓦是什么意思更o补x是什么梗内功的意思是什么被动技能的意思是什么金吒是什么意思机动战队:灰天鹅的意思是什么细思极恐的意思是什么毒趴的解释是什么产屋敷天音的意思是什么
最终幻想XV是什么意思 soga意思是什么? 标签癌是什么梗 你算哪块小饼干解释是什么? 辣香意思是什么? 耳朵怀孕了解释是什么? 十二神器是什么梗 勾搭解释是什么? 缇米朵·丘忒是什么意思 oo遁的意思是什么 百草园是什么意思 叙利亚暑期工意思是什么? 池田千鹤是什么意思 刘备文学是什么意思 贝多芬为的解释是什么 止痛药解释是什么? 五黑一白的解释是什么 谢广坤和苏大强掉河里你救谁梗的来源介绍是什么梗? 高达梗的意思是什么 卢老爷生前也是个体面人意思是什么? 水马是什么意思 主观好人是什么意思 KY式日本语是什么意思 虎牙抽舰队的意思是什么 贴吧紫烟是什么梗 鉴定完毕的意思?出处,英文,例句 桐崎千棘是什么意思 李老八意思是什么? 因缺思厅梗意思是什么? 迅雷启动速度慢怎么办?
分类
  • 俏皮话
  • 各种梗
  • 小窍门
  • 最新网络新词
  • 综合资讯
  • 网络新词
  • 网络流行语
  • 网络用语
标签聚合
网络 序列号 生活 流行 出处 网络流行语 BE 日语 男人 女人 爱情 流行语 网络语言 歇后语 方法 开店 2019 2018 大全 网络用语 淘宝网 英文 笑话 淘宝 小窍门 歌词 小常识 网络词汇 adobe 网络新词

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


COPYRIGHT © 2021 lxchot.com. ALL RIGHTS RESERVED.