[Fixed] CSS transition not working and examples

CSS transitions are a quick way to create animations for your web designs. We can use this the transition shorthand CSS keyword. When creating designs, I sometimes can not get the transition CSS property to work correctly.

Steps to fix CSS transition not working issues:

1. Check that the syntax of your CSS transition property is correct. Make sure that the transition property is on the element itself and not on the element’s trigger state (eg :hover or :focus).
2. The transtion can only be applied to animatable properties.
3. Check that the animating property is not set to auto. Transitions can not animate CSS properties that are not explitly set and auto.
4. Verify that the transition property is supported on the users' browser

Check that the syntax of your CSS transition property is correct

CSS transition is a simple way to create a animation (or change) of a CSS property over time. This is usually done on a hover to trigger the animation.

It allows you to define three options:

• the CSS property to animate
• How long should the animation go for
• How should the animation run - by using the timing functions (eg linear, ease-in, ease-out)

As the below code, the syntax of the transition property follows:

div {
  transition: <property> <duration> <timing-function> <delay>;
}

/* property - the CSS property that we want to animate. We can use the `all` keyword to say that we allow all to animation */
/* duration - the number of seconds the animation should be */
/* timing-function - the timing function to use the animation (eg linear, ease-in, ease-out) */
/* delay - the number of seconds to delay the animation */

The above transition is a shorthand. If you want to specify explicitly each component, we can use the following sub-properties.

• transition-property - only CSS properties listed here will be animated. The all keyword can be used to tell the browser that all CSS properties can be animated if changed.
• transition-duration - duration in seconds (s) or milliseconds of the animation.
• transition-timing-function - the timing function of how the animation will run. For example, linear will run in a constant fashion. ease-in will run the animation quickly in the begining and slow at the end.
• transition-delay - the delay in seconds (s) or milliseconds (mms)

#delay {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

#delay:hover {
  font-size: 36px;
}

Tip: Prefer to not use transition-property:all

The transtion can only be applied to animatable properties

CSS contains a list of properties that can be made “animatable”. What this really means is that if this property can be changed over time.

As an example, the width and height are obvious properties that can we animated. We can change the width/height of a CSS element (animating it to expand or shrink, etc).

An example of a CSS property that can not be animatable are layout or display type properties. For example flex-direction does not make sense as a animatable property. We can really change this property over time (only has a specific set of values - eg row, column ).

A list of animatable CSS properties can be found here:

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Tip: We can find if a property is animatable by looking at the Formal Definition. For example animation-direction is not animatable:

• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction#formal_definition

Check that the animating property is not set to auto. Transitions can not animate CSS properties that are not explitly set and auto.

The CSS specification recommends that we do not animate elements that rely on the auto property value. This just means that we should explicitly set the “from” value and “to” value when we declare the transition.

For example, the below uses transition on the height:auto property. height:auto just set the height of the element to be adjusted based on the content. When we hover over the block, theres no animation (just flicker with the new height)

.btn{
  height:100px;
  transition: all 1s;
  background-color: pink;
  width:100%;
}

.btn:hover{
    height: auto; /* ❌ Not working */
}

As you can see, the animation does not work because we are messing with the auto property.

Now if we change the height:auto to height with a specific value (eg height:200px), we can see that the transition will work.

.btn{
  height:100px;
  transition: all 1s;
  background-color: pink;
  width:100%;
}

.btn:hover{
    height: 200px; /* ✔️ Change to be explicit height */
}

Some browsers (such as Gecko implementations - eg Firefox) are more strict about this. Webkit browsers are not as strict (such as Chrome, Safari).

Verify that the transition property is supported on the users' browser

The transition property is widely supported on modern browsers. However there is a few quirks on older versions of Internet Explorer (IE11) and versions of FireFox.

Considerations for making CSS transitions to work across a wide range of browsers should be:

• Generally with modern browsers, you will not need to use vendor prefixes anymore. However if you want to be safe we can use the following:

-webkit-transition: all 500ms;
   -moz-transition: all 500ms;
     -o-transition: all 500ms;
        transition: all 500ms;

• Issues with IE 11 and lower - does not support SVG fill property, column-count is not supported as animatable property, background-size property is not supported
• Safari 11 does not support flex-basis as a animatable CSS property
• Opera 11 does not support timing functions such as steps(), step-start(), and step-end()

Summary

CSS transitions are a easy way to animate a CSS element when its state changes (eg :hover, :focus, when checkbox is checked input:checked). In this post we went over various reasons why your CSS transition is not working.

We need to check that we are using the syntax correctly, check that we are trying to animate a property that is listed as a animatable property, make sure that we are not using the auto keyword and review browser support.

Generally most modern browsers support CSS transitions, but its good to add vendor prefixes.