Created
April 16, 2024 13:33
-
-
Save pixelmattersdev/8f20ea3804118345f5494a389fb9cc50 to your computer and use it in GitHub Desktop.
Intro to CSS animations: a tutorial for dynamic web designs
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
.core-cloud { | |
/* ...CSS styles for this element */ | |
animation: 2s linear infinite rotate-core; | |
} | |
@keyframes rotate-core { | |
0% { | |
transform: rotate(0deg); | |
} | |
100% { | |
transform: rotate(180deg); | |
} | |
} |
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
animation: 3s cubic-bezier(.44,.28,.33,.95) infinite rotate-core; |
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
@keyframes color-shift { | |
from { | |
filter: hue-rotate(0deg); | |
} | |
to { | |
filter: hue-rotate(80deg); | |
} | |
} |
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
@media (prefers-reduced-motion: no-preference) { | |
/* Add your animation code here */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment