The creation and completion of a CSS Transition result in a corresponding DOM Event. An event is fired for each property that undergoes a transition which gives the name of the property and the duration for which transition occurs. If the transition is not executed before completion the event will not fire.
- propertyName: Returns the name of the transition.
- elapsedTime: Returns the number of seconds a transition has been running.
- transitionend: The event occurs when a CSS transition has been completed.
- transitionstart: The event occurs when a CSS transition has started.
- for transitionend event:
- Google Chrome-26.0
- Internet Explorer-10.0
- Mozilla Firefox-16.0
- HTML | DOM TransitionEvent elapsedTime Property
- HTML | DOM TransitionEvent propertyName Property
- HTML Course | Structure of an HTML Document
- HTML | DOM HTML Object
- HTML Course | Basics of HTML
- HTML | br Tag
- HTML | col Tag
- HTML <ins> Tag
- HTML | th Tag
- HTML | <ol> Tag
- HTML | <del> Tag
- HTML | <html> Tag
- HTML | <em> Tag
- HTML | <hr> Tag
- HTML | <i> Tag
Example-1: “transitionend” event
Example-2: “TransitionEvent” propertyName property.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.