sforkowany z mirror/fedigov
108 wiersze
2.3 KiB
SCSS
108 wiersze
2.3 KiB
SCSS
/* ==========================================================================
|
|
General Keyframes animations
|
|
========================================================================== */
|
|
|
|
.animated {
|
|
animation-duration: 0.5s;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-duration: 0.5s;
|
|
-webkit-animation-fill-mode: both;
|
|
}
|
|
|
|
//Delays
|
|
.delay-1 {
|
|
animation-delay: .25s;
|
|
}
|
|
.delay-2 {
|
|
animation-delay: .5s;
|
|
}
|
|
.delay-3 {
|
|
animation-delay: .75s;
|
|
}
|
|
.delay-4 {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
// FADE IN LEFT
|
|
@keyframes fadeInLeft {
|
|
from {
|
|
-webkit-transform: translate3d(20px, 0, 0);
|
|
transform: translate3d(20px, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes fadeInLeft {
|
|
from {
|
|
-webkit-transform: translate3d(20px, 0, 0);
|
|
transform: translate3d(20px, 0, 0);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.preFadeInLeft {
|
|
opacity: 0;
|
|
}
|
|
|
|
.fadeInLeft {
|
|
opacity: 0;
|
|
animation-name: fadeInLeft;
|
|
-webkit-animation-name: fadeInLeft;
|
|
}
|
|
|
|
// FADE IN UP
|
|
@keyframes fadeInUp {
|
|
from {
|
|
-webkit-transform: translate3d(0, 20px, 0);
|
|
transform: translate3d(0, 20px, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
@-webkit-keyframes fadeInUp {
|
|
from {
|
|
-webkit-transform: translate3d(0, 20px, 0);
|
|
transform: translate3d(0, 20px, 0);
|
|
}
|
|
to {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.preFadeInUp {
|
|
opacity: 0;
|
|
}
|
|
.fadeInUp {
|
|
opacity: 0;
|
|
animation-name: fadeInUp;
|
|
-webkit-animation-name: fadeInUp;
|
|
}
|
|
|
|
//Gelatine
|
|
.gelatine {
|
|
animation: gelatine 0.6s;
|
|
animation-duration: 0.6s;
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes gelatine {
|
|
from, to { transform: scale(1, 1); }
|
|
25% { transform: scale(0.9, 1.1); }
|
|
50% { transform: scale(1.1, 0.9); }
|
|
75% { transform: scale(0.95, 1.05); }
|
|
} |