365 lines
7.4 KiB
CSS
365 lines
7.4 KiB
CSS
/*!
|
|
Animate.css - http://daneden.me/animate
|
|
Licensed under the MIT license - http://opensource.org/licenses/MIT
|
|
|
|
Copyright (c) 2015 Daniel Eden
|
|
*/
|
|
.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.hinge {
|
|
-webkit-animation-duration: 2s;
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.animated.bounceIn,
|
|
.animated.bounceOut {
|
|
-webkit-animation-duration: .75s;
|
|
animation-duration: .75s;
|
|
}
|
|
|
|
.animated.flipOutX,
|
|
.animated.flipOutY {
|
|
-webkit-animation-duration: .75s;
|
|
animation-duration: .75s;
|
|
}
|
|
|
|
@-webkit-keyframes shake {
|
|
from, to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
}
|
|
@keyframes shake {
|
|
from, to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
10%, 30%, 50%, 70%, 90% {
|
|
-webkit-transform: translate3d(-10px, 0, 0);
|
|
transform: translate3d(-10px, 0, 0);
|
|
}
|
|
20%, 40%, 60%, 80% {
|
|
-webkit-transform: translate3d(10px, 0, 0);
|
|
transform: translate3d(10px, 0, 0);
|
|
}
|
|
}
|
|
.shake {
|
|
-webkit-animation-name: shake;
|
|
animation-name: shake;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
.fadeInDown {
|
|
-webkit-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fadeOut {
|
|
-webkit-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDown {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
@keyframes fadeOutDown {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
.fadeOutDown {
|
|
-webkit-animation-name: fadeOutDown;
|
|
animation-name: fadeOutDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUp {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
@keyframes fadeOutUp {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
.fadeOutUp {
|
|
-webkit-animation-name: fadeOutUp;
|
|
animation-name: fadeOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes moveUp {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, calc( -100% - 19px), 0);
|
|
transform: translate3d(0, calc( -100% - 19px), 0);
|
|
}
|
|
}
|
|
@keyframes moveUp {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, calc( -100% - 19px), 0);
|
|
transform: translate3d(0, calc( -100% - 19px), 0);
|
|
}
|
|
}
|
|
.moveUp {
|
|
-webkit-animation-name: moveUp;
|
|
animation-name: moveUp;
|
|
}
|
|
|
|
@-webkit-keyframes moveDown {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, calc( 100% + 19px), 0);
|
|
transform: translate3d(0, calc( 100% + 19px), 0);
|
|
}
|
|
}
|
|
@keyframes moveDown {
|
|
from {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, calc( 100% + 19px), 0);
|
|
transform: translate3d(0, calc( 100% + 19px), 0);
|
|
}
|
|
}
|
|
.moveDown {
|
|
-webkit-animation-name: moveDown;
|
|
animation-name: moveDown;
|
|
}
|
|
|
|
@-webkit-keyframes show {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
@keyframes show {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
}
|
|
.fade.show .modal-dialog {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-name: show;
|
|
animation-name: show;
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 0);
|
|
-o-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
}
|
|
.fade .modal-dialog {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-name: fade;
|
|
animation-name: fade;
|
|
}
|
|
|
|
@-webkit-keyframes showMini {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 30%);
|
|
-o-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
}
|
|
@keyframes showMini {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 30%);
|
|
-o-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
}
|
|
.fade.show .modal-mini.modal-dialog {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-name: showMini;
|
|
animation-name: showMini;
|
|
}
|
|
|
|
@-webkit-keyframes fadeMini {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 30%);
|
|
-o-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
}
|
|
@keyframes fadeMini {
|
|
from {
|
|
opacity: 1;
|
|
-webkit-transform: translate(0, 30%);
|
|
-o-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate(0, -25%);
|
|
-o-transform: translate(0, -25%);
|
|
transform: translate(0, -25%);
|
|
}
|
|
}
|
|
.fade .modal-mini.modal-dialog {
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-name: fadeMini;
|
|
animation-name: fadeMini;
|
|
}
|