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 p tag specifies width: 100px and background-color: red; In this case, when the width is 100px, the background is red. The transition-duration is specified below: 2s;

In this case, the time from start to end of the effect achieved by transition is 2 seconds.

The last is transition-property:width; the effect of applying the transition property is only width.

: Specify width: 420px and background-color: blue in hover. In this way, when the mouse is moved above, the width becomes 420px and the background becomes blue.

If the mouse is hovering, the width will be 420px and the background will be blue, but the transition effect will only be the width. The change of 2 seconds is only the width. Since the transition effect doesn't apply to the specified background color, it will turn blue whenever you hover over it.

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!