Created
January 17, 2023 11:39
-
-
Save edgar0011/d71a37186b64cf39a658ad572b4583d0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.animBgr { | |
width: 100%; | |
opacity: 0; | |
animation: grow-animation 450ms ease-in-out forwards; | |
@keyframes grow-animation { | |
0% { width: 0%; opacity: 1;} | |
100% { width: 100%; opacity: 1; } | |
} | |
animation-delay: calc(var(--animation-delay) * 1ms); | |
} | |
.animFadeIn { | |
opacity: 0; | |
animation: fade-in-animation 350ms ease-in-out forwards; | |
@keyframes fade-in-animation { | |
0% { opacity: 0;} | |
100% { opacity: 1;} | |
} | |
will-change: opacity; | |
} | |
.animSlideDown { | |
opacity: 0; | |
animation: slide-down-animation 350ms ease-in-out forwards; | |
@keyframes slide-down-animation { | |
0% { transform: translateY(-4rem); opacity: 0;} | |
30% { opacity: 0;} | |
100% { transform: translateY(0rem); opacity: 1;} | |
} | |
will-change: opacity, transform; | |
} | |
.animSlideUp { | |
opacity: 0; | |
animation: slide-up-animation 350ms ease-in-out forwards; | |
@keyframes slide-up-animation { | |
0% { transform: translateY(4rem); opacity: 0;} | |
30% { opacity: 0;} | |
100% { transform: translateY(0rem); opacity: 1;} | |
} | |
will-change: opacity, transform; | |
} | |
.animSlideRight { | |
opacity: 0; | |
animation: slide-right-animation 350ms ease-in-out forwards; | |
@keyframes slide-right-animation { | |
0% { transform: translateX(-4rem); opacity: 0;} | |
30% { opacity: 0;} | |
100% { transform: translateX(0rem); opacity: 1;} | |
} | |
will-change: opacity, transform; | |
} | |
.animSlideLeft { | |
opacity: 0; | |
animation: slide-left-animation 350ms ease-in-out forwards; | |
@keyframes slide-left-animation { | |
0% { transform: translateX(4rem); opacity: 0;} | |
30% { opacity: 0;} | |
100% { transform: translateX(0rem); opacity: 1;} | |
} | |
will-change: opacity, transform; | |
} | |
.animSpin { | |
animation: spin-animation 1200ms ease-in-out forwards; | |
animation-delay: 400ms; | |
will-change: transform, opacity; | |
transition: opacity 250ms ease-out; | |
&:hover { | |
animation: spin-animation-reset 0ms ease forwards; | |
animation-delay: 0ms; | |
opacity: 0.5; | |
} | |
@keyframes spin-animation { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(1440deg); } | |
} | |
@-webkit-keyframes spin-animation-reset { | |
to { transform: rotate(0deg); } | |
} | |
} | |
.animSpinInfinite { | |
animation: spin-animation 1200ms ease-in-out infinite; | |
animation-delay: 400ms; | |
will-change: transform, opacity; | |
transition: opacity 250ms ease-out; | |
&:hover { | |
animation: spin-animation-reset 0ms ease forwards; | |
animation-delay: 0ms; | |
opacity: 0.5; | |
} | |
@keyframes spin-animation { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(1440deg); } | |
} | |
@-webkit-keyframes spin-animation-reset { | |
to { transform: rotate(0deg); } | |
} | |
} | |
.breathOnHover { | |
transform: scale(1); | |
box-shadow: 0px 0px 0px 0px rgba(10,12,10,0.27); | |
transition: transform 250ms ease-in-out, box-shadow 300ms ease; | |
will-change: transform; | |
&:hover{ | |
transform: scale(1.1); | |
box-shadow: 0px 0px 20px 0px rgba(10,12,10,0.27); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment