Reasons why the transition attribute in CSS does not work and how to solve it

The transition property in CSS can be used to adjust the time when an element changes, and it can be displayed like an animation. Although the transition attribute can easily achieve transition effects, sometimes it may be invalid, so we need to understand the writing rules of the transition attribute.

Let’s first take a look at The reason why the transition attribute in CSS does not work

Transition is a method that allows you to Properties that specify change times, etc.

It can have an animation-like effect when used to set the timing of color and size changes when the mouse cursor is placed over a button.

The transition format is as follows

选择器名称{ 
    transition-property：value; 
    }

The values ​​that can be specified are:

all: You can specify all properties that apply to the transition.

none: No properties have changed.

Attribute name: Specify the attribute name to which the transformation is to be applied. Multiples can be specified via commas.

Many reasons why transition does not work are usually descriptions of transitions on hover events, so pay more attention

Because animated motion can be achieved, some effects are easy to implement using the transition attribute.

Let’s take a look at the specific usage of the transition attribute

As mentioned above, do not use the transition attribute in the hover event.

HTML

<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>
<p>文字内容</p>

CSS

p {
  width:100px;
  background-color:red;
  transition-duration: 2s;
  transition-property:width;
}
p:hover {
  width:420px;
  background-color:blue;
}

When the mouse is not placed on it, the browser will display the following effect

When the mouse is placed on the red background, the display effect on the browser is as follows:

The above is the detailed content of Reasons why the transition attribute in CSS does not work and how to solve it. For more information, please follow other related articles on the PHP Chinese website!