Animation

Constructor

Animation()

Instance properties

Animation.currentTime

Animation.effect

Instance methods

  • AnimationEffect.getTiming() - Returns the object associated with the animation containing all the animation's timing values.
  • AnimationEffect.getComputedTiming() - Returns the object associated with the animation containing all the animation's timing values.
  • AnimationEffect.updateTiming() - Updates the specified timing properties of this AnimationEffect.

Animation.finished

				
              Promise.all(elem.getAnimations().map((animation) =>
              animation.finished)).then( () => elem.remove(), );
            
		    

Animation.id

				
					rabbitDownAnimation.id = "rabbitGo"
            
		    

Animation.pending

Animation.playbackRate

Animation.playState

  • idle - The current time of the animation is unresolved and there are no pending tasks.
  • running - The animation is running.
  • paused - animation was suspended and the Animation.currentTime property is not updating.
  • finished - The animation has reached one of its boundaries and the Animation.currentTime property is not updating.

Animation.ready

				
					animation.ready.then(() => {
						// Do whatever needs to be done when
						// the animation is ready to run
					  });
            
		    

Animation.replaceState

  • active - The initial value of the animation's replace state when the animation is created.
  • persisted - The animation has been explicitly persisted by invoking Animation.persist() on it.
  • removed - The animation has been removed by the browser automatically.

Animation: startTime

Animation.timeline

Instance methods

cancel()

commitStyles()

finish()

pause()

persist()

play()

reverse()

updatePlaybackRate()

Events

cancel

			
					addEventListener("cancel", (event) => { })
					oncancel = (event) => { }
            
		    

finish

			
				addEventListener("finish", (event) => { })
				onfinish = (event) => { }
			
			

remove

			
				addEventListener('remove', (event) => { })
                onremove = (event) => { }
			
			
Thank you for your attention :)