Learn CSS Animations in 9 Minutes
13.7 هزار بار بازدید -
2 ماه پیش
-
Learn CSS animations in 8
Learn CSS animations in 8 minutes | Animations Crashcourse | every animation property explained | Loading Animation Project Tutorial
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 ✌️
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 ✌️
2 ماه پیش
در تاریخ 1403/03/27 منتشر شده
است.
13,759
بـار بازدید شده