Transition can i use

It's easy to use transitions to make the effect even more attractive. This CSS establishes the look of the menu, with the background and text colors both changing when the element is in its :hover and :focus states:. This is treated as if the initial state had never occurred and the element was always in its final state. The easy way to overcome this limitation is to apply a window. Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality.

Take the following example. With CSS you can make it smooth without any extra effort. Add a transition to the element and any change will happen smoothly:.

You can use the transitionend event to detect that an animation has finished running. This is a TransitionEvent object, which has two added properties beyond a typical Event object:. A float indicating the number of seconds the transition had been running at the time the event fired. This value isn't affected by the value of transition-delay. As usual, you can use the addEventListener method to monitor for this event:.

You detect the beginning of a transition using transitionrun fires before any delay and transitionstart fires after any delay , in the same kind of fashion:. Note: The transitionend event doesn't fire if the transition is aborted before the transition is completed because either the element is made display : none or the animating property's value is changed.

You can control the individual components of the transition with the following sub-properties: transition-property Specifies the name or names of the CSS properties to which transitions should be applied. Hover over the box to see these properties animated. Each single-property transition describes the transition that should be applied to a single property or the special values all and none.

It includes:. See how things are handled when lists of property values aren't the same length. In addition to the built in timing functions, you can also specify your own. It's worth noting that the curves you produce can have negative values in them. The bezier curve for the last box above is cubic-bezier 1. You will notice the final parameter is a delay - this let's you trigger things after an event has occurred. Below is a small demo showing this functionality.

This works by just adding a delay to each of the different circles. This is as easy as adding a transition-delay: 0. You can set the way different properties animate differently. In this example the normal blue circle has this CSS with the appropriate vendor prefixes :. This allows us to animate the properties independently of each other, meaning that this simple technique can be used to create very complex animations.

Regarding the properties you can animate, the best way is to experiment.