.animated.ms_endlessSpin {
--spin-speed: 10s;
animation-name: ms_endlessSpin;
animation-duration: var(--spin-speed, 10s)!important;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.animated.animated-slow.ms_endlessSpin { --spin-speed: 14s; }
.animated.animated-fast.ms_endlessSpin { --spin-speed: 5s; }
@-webkit-keyframes ms_endlessSpin {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@keyframes ms_endlessSpin {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to {
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
} @-webkit-keyframes slideInDownSmooth {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDownSmooth {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.ms_ani_slideInDownSmooth {
-webkit-animation-name: slideInDownSmooth;
animation-name: slideInDownSmooth;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
} @-webkit-keyframes slideOutUpSmooth {
0% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
}
@keyframes slideOutUpSmooth {
0% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
}
.ms_ani_slideOutUpSmooth {
-webkit-animation-name: slideOutUpSmooth;
animation-name: slideOutUpSmooth;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}  @-webkit-keyframes ms_fadeInShort {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes ms_fadeInShort {
0% { opacity: 0; }
100% { opacity: 1; }
}
.ms_ani_fadeInShort {
-webkit-animation-name: ms_fadeInShort;
animation-name: ms_fadeInShort;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
} @-webkit-keyframes ms_fadeInUpShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 36px, 0);
transform: translate3d(0, 36px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes ms_fadeInUpShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 36px, 0);
transform: translate3d(0, 36px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.ms_ani_fadeInUpShort {
-webkit-animation-name: ms_fadeInUpShort;
animation-name: ms_fadeInUpShort;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
} @-webkit-keyframes ms_fadeInDownShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -36px, 0);
transform: translate3d(0, -36px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes ms_fadeInDownShort {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -36px, 0);
transform: translate3d(0, -36px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.ms_ani_fadeInDownShort {
-webkit-animation-name: ms_fadeInDownShort;
animation-name: ms_fadeInDownShort;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
} @-webkit-keyframes ms_fadeInLeftShort {
0% {
opacity: 0;
-webkit-transform: translate3d(-36px, 0, 0);
transform: translate3d(-36px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes ms_fadeInLeftShort {
0% {
opacity: 0;
-webkit-transform: translate3d(-36px, 0, 0);
transform: translate3d(-36px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.ms_ani_fadeInLeftShort {
-webkit-animation-name: ms_fadeInLeftShort;
animation-name: ms_fadeInLeftShort;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
} @-webkit-keyframes ms_fadeInRightShort {
0% {
opacity: 0;
-webkit-transform: translate3d(36px, 0, 0);
transform: translate3d(36px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes ms_fadeInRightShort {
0% {
opacity: 0;
-webkit-transform: translate3d(36px, 0, 0);
transform: translate3d(36px, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.ms_ani_fadeInRightShort {
-webkit-animation-name: ms_fadeInRightShort;
animation-name: ms_fadeInRightShort;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
} .animated.ms_ani_fadeInShort,
.animated.ms_ani_fadeInUpShort,
.animated.ms_ani_fadeInDownShort,
.animated.ms_ani_fadeInLeftShort,
.animated.ms_ani_fadeInRightShort,
.animated.ms_ani_slideInDownSmooth,
.animated.ms_ani_slideOutUpSmooth {
--ms-motion-duration: 700ms;
-webkit-animation-duration: var(--ms-motion-duration);
animation-duration: var(--ms-motion-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated-fast .animated.ms_ani_fadeInShort,
.animated-fast .animated.ms_ani_fadeInUpShort,
.animated-fast .animated.ms_ani_fadeInDownShort,
.animated-fast .animated.ms_ani_fadeInLeftShort,
.animated-fast .animated.ms_ani_fadeInRightShort,
.animated-fast .animated.ms_ani_slideInDownSmooth,
.animated-fast .animated.ms_ani_slideOutUpSmooth {
--ms-motion-duration: 350ms;
}
.animated-slow .animated.ms_ani_fadeInShort,
.animated-slow .animated.ms_ani_fadeInUpShort,
.animated-slow .animated.ms_ani_fadeInDownShort,
.animated-slow .animated.ms_ani_fadeInLeftShort,
.animated-slow .animated.ms_ani_fadeInRightShort,
.animated-slow .animated.ms_ani_slideInDownSmooth,
.animated-slow .animated.ms_ani_slideOutUpSmooth {
--ms-motion-duration: 1.2s;
} .ms-animated-text-block,
.ms-animated-item.ms-animated-text-block {
display: inline-block;
will-change: transform, opacity;
} .ms-animated-word {
display: inline-block;
white-space: nowrap;
}