CSS 56 💻 animation properties part 1
a – animation-delay and duration
- animation-name property specifies the name of the @keyframes rule that defines the animation sequence
- you can specify multiple rule names separated with a ‘,’
- animation-name: slideIn; → specifies the rule name
- animation-duration specifies the length of time it takes for an animation to comple one cycle
- values: auto → for time-based animations, fills the entire timeline
- or value specifies in either s or ms
- animation-duration: 2s; →sets the animation duration to 2 seconds
b – animation-timing-function and delay
- animation-timing-function controls how an animation progresses through its duration
- It defines the speed curve of the animation, making it possible for animations to accelerate, decelerate…
- or maintain a constant speed.
- animation-timing-function: ease-in-out; → sets the animation to slow start and slow end
- animation-delay specifies the amount of time that should elapse before an animation starts playing
- This can be specifies in s and ms
- You can specify a negative value. -2s it will start the animation immediately but 2 secs in the animation
- animation-delay: 1s; → 1 sec animation delay
c – animation-iteration-count and direction
- animation-iteration-count specifies the number of times an animation should repeated
- values: infinite → will repeat for ever
- number → you can speficy an integer and a non-integer number. 0.5 will play half animation
- animation-iteration-count: 3; → will repeat the animation 3 times
- animation-direction swhether the animation should play forwards, backwards, or alternate between both directions.
- values: normal, reverse, alternate, alternate-reverse
- animation-direction: alternate-reverse; → Moves backward on odd iterations and forward on even iterations.
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!