You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
3.0 KiB
168 lines
3.0 KiB
5 years ago
|
@-webkit-keyframes bounce {
|
||
|
0% {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
57.2% {
|
||
|
transform: translateY(-2px);
|
||
|
}
|
||
|
100% {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes bounce {
|
||
|
0% {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
57.2% {
|
||
|
transform: translateY(-2px);
|
||
|
}
|
||
|
100% {
|
||
|
transform: translateY(0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.bounce {
|
||
|
-webkit-animation-name: bounce;
|
||
|
animation-name: bounce;
|
||
|
-webkit-transform-origin: center bottom;
|
||
|
transform-origin: center bottom;
|
||
|
animation-iteration-count: infinite;
|
||
|
}
|
||
|
|
||
|
@-webkit-keyframes bounceInUp {
|
||
|
from,
|
||
|
60%,
|
||
|
75%,
|
||
|
90%,
|
||
|
to {
|
||
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
|
}
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, 3000px, 0);
|
||
|
transform: translate3d(0, 3000px, 0);
|
||
|
}
|
||
|
60% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translate3d(0, -20px, 0);
|
||
|
transform: translate3d(0, -20px, 0);
|
||
|
}
|
||
|
75% {
|
||
|
-webkit-transform: translate3d(0, 10px, 0);
|
||
|
transform: translate3d(0, 10px, 0);
|
||
|
}
|
||
|
90% {
|
||
|
-webkit-transform: translate3d(0, -5px, 0);
|
||
|
transform: translate3d(0, -5px, 0);
|
||
|
}
|
||
|
to {
|
||
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
transform: translate3d(0, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@keyframes bounceInUp {
|
||
|
from,
|
||
|
60%,
|
||
|
75%,
|
||
|
90%,
|
||
|
to {
|
||
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
|
}
|
||
|
from {
|
||
|
opacity: 0;
|
||
|
-webkit-transform: translate3d(0, 3000px, 0);
|
||
|
transform: translate3d(0, 3000px, 0);
|
||
|
}
|
||
|
60% {
|
||
|
opacity: 1;
|
||
|
-webkit-transform: translate3d(0, -20px, 0);
|
||
|
transform: translate3d(0, -20px, 0);
|
||
|
}
|
||
|
75% {
|
||
|
-webkit-transform: translate3d(0, 10px, 0);
|
||
|
transform: translate3d(0, 10px, 0);
|
||
|
}
|
||
|
90% {
|
||
|
-webkit-transform: translate3d(0, -5px, 0);
|
||
|
transform: translate3d(0, -5px, 0);
|
||
|
}
|
||
|
to {
|
||
|
-webkit-transform: translate3d(0, 0, 0);
|
||
|
transform: translate3d(0, 0, 0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.bounceInUp {
|
||
|
-webkit-animation-name: bounceInUp;
|
||
|
animation-name: bounceInUp;
|
||
|
}
|
||
|
|
||
|
.animated {
|
||
|
-webkit-animation-duration: 1s;
|
||
|
animation-duration: 1s;
|
||
|
-webkit-animation-fill-mode: both;
|
||
|
animation-fill-mode: both;
|
||
|
}
|
||
|
|
||
|
.animated.infinite {
|
||
|
-webkit-animation-iteration-count: infinite;
|
||
|
animation-iteration-count: infinite;
|
||
|
}
|
||
|
|
||
|
.animated.delay-1s {
|
||
|
-webkit-animation-delay: 1s;
|
||
|
animation-delay: 1s;
|
||
|
}
|
||
|
|
||
|
.animated.delay-2s {
|
||
|
-webkit-animation-delay: 2s;
|
||
|
animation-delay: 2s;
|
||
|
}
|
||
|
|
||
|
.animated.delay-3s {
|
||
|
-webkit-animation-delay: 3s;
|
||
|
animation-delay: 3s;
|
||
|
}
|
||
|
|
||
|
.animated.delay-4s {
|
||
|
-webkit-animation-delay: 4s;
|
||
|
animation-delay: 4s;
|
||
|
}
|
||
|
|
||
|
.animated.delay-5s {
|
||
|
-webkit-animation-delay: 5s;
|
||
|
animation-delay: 5s;
|
||
|
}
|
||
|
|
||
|
.animated.fast {
|
||
|
-webkit-animation-duration: 800ms;
|
||
|
animation-duration: 800ms;
|
||
|
}
|
||
|
|
||
|
.animated.faster {
|
||
|
-webkit-animation-duration: 500ms;
|
||
|
animation-duration: 500ms;
|
||
|
}
|
||
|
|
||
|
.animated.slow {
|
||
|
-webkit-animation-duration: 2s;
|
||
|
animation-duration: 2s;
|
||
|
}
|
||
|
|
||
|
.animated.slower {
|
||
|
-webkit-animation-duration: 3s;
|
||
|
animation-duration: 3s;
|
||
|
}
|
||
|
|
||
|
@media (prefers-reduced-motion) {
|
||
|
.animated {
|
||
|
-webkit-animation: unset !important;
|
||
|
animation: unset !important;
|
||
|
-webkit-transition: none !important;
|
||
|
transition: none !important;
|
||
|
}
|
||
|
}
|