87 lines
1.1 KiB
SCSS
87 lines
1.1 KiB
SCSS
@keyframes toggleFavHeart {
|
|
0%, 20% {
|
|
color: #d01d35;
|
|
transform: scale(1.2);
|
|
}
|
|
100% {
|
|
color: #d01d35;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInBg {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 33%;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 100%;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fromBottom {
|
|
from {
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideFromRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideFromLeft {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes paneBgAround {
|
|
0% {
|
|
background-position: -10vw 0%;
|
|
}
|
|
50% {
|
|
background-position: -20vw 0%;
|
|
}
|
|
100% {
|
|
background-position: -10vw 0%;
|
|
}
|
|
}
|
|
|
|
.fade-in-children {
|
|
@for $i from 1 through 10 {
|
|
:nth-child(#{$i}) {
|
|
opacity: 0;
|
|
animation: fadeIn 1.5s ease-in-out 1s 1 forwards, fromBottom 1.5s ease-in-out 1s 1 forwards;
|
|
animation-delay: 0.25s + $i * 0.25s;
|
|
}
|
|
}
|
|
}
|