Learn CSS animations in 8 minutes | Animations Crashcourse | every animation property explained | Loading Animation Project Tutorial
Become a Member to Support our Channel:
👉 / @coding2go
Visit our Website for courses, projects, tutorials + code examples
👉https://coding2go.com
Deploy your own website with Hostinger
👉 https://www.hostinger.com/coding2go
🔥 Discount Code: CODING2GO
Sources / Credits to:
https://developer.mozilla.org/en-US/d...
https://www.smashingmagazine.com/2021...
In this tutorial, you'll learn:
What CSS animations are and why they're useful
How to create simple CSS animations using @keyframes
When to use css transitions and animations
How to play css animations with javascript
These CSS animations properties will be explained in the video:
animation-name: spin
animation-duration: number in s
animation-timing-function: linear, ease, ease-in, ease-out, ease-in-out
animation-delay: number is s
animation-direction: normal, reverse, alternate
animation-iteration-count: number, infinite
animation-fill-mode: forwards
animation-play-state: running, paused
Example for animation shorthand:
animation: 3s spin ease-in-out 1s infinite alternate running;
Background Music:
Track: "Little Things"
Music provided by https://Slip.stream
Free Download/Stream: https://get.slip.stream/QmMj1I
Like and subscribe for more tutorials like this ✌️
Watch video Learn CSS Animations in 9 Minutes online, duration hours minute second in high quality that is uploaded to the channel Coding2GO 16 June 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 96,489 times and liked it 4.8 thousand visitors.