loading

Animation

animation can be implemented with help of css and js

CSS Animation

for css animation @keyframes is used to define animation
@keyframes animationName{
            0%{css}
            100%{css}
        }

JS Animation

JavaScript animation events are events triggered during the lifecycle of animations. These events can be used to control and respond to animations in web applications. The following are some common animation events in JavaScript:

  • ✅ animationstart: This event is triggered when a CSS animation starts. You can use it to perform actions when an animation begins.
  • ✅ animationend: This event is fired when a CSS animation completes. You can use it to trigger actions when the animation finishes.
  • ✅ transitionend: While not a true animation event, it is an event used with CSS transitions. It fires when a CSS transition finishes, making it useful for handling the end of a transition effect.

✳ You can use these events in conjunction with CSS animations and transitions to create interactive and dynamic web experiences. Make sure to attach these event listeners to the relevant HTML elements that have the animations or transitions applied to them.


        addEventListener("animationend", () => {})

        addEventListener("animationstart", () => {})

        
        
x

Order for website design

Help :