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
@-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; |
|
} |
|
} |