Home > Article > Web Front-end > About CSS3 using the transition attribute to achieve transition effects
The new transform attribute in CSS3 can realize the transition effect of elements during the transformation process and realize basic animation. The following article will introduce to you how CSS3 uses the transition attribute to achieve transition effects. Friends who need it can refer to this article
Detailed explanation of the attribute
The purpose of the transition attribute is Let some CSS properties (such as background) appear with a smooth transition effect. It is a merged property, which is composed of the following four properties:
transition-property: Sets the CSS property of the application transition, such as background.
transition-duration: Set the time spent on the transition effect. The default is 0.
transition-timing-function: Set the time curve of the transition effect. The default is "ease".
transition-delay: Specifies when the transition effect starts. The default is 0.
Example:
button{ transition: background 1s; -webkit-transition: background 1s; /* Safari */ }
When defining the transition attribute, transition-property and transition-duration are required, others Two are optional.
transition-property and transition-duration
transition-property is used to specify the CSS properties that apply transition effects. These properties include (may not be complete ):
width
height
color
background (color, image, position)
transform (in the next post)
border (color, width)
position (top, bottom, left, right )
text (size, weight, shadow, word-spacing)
margin
padding
opacity
visibility
z-index
all
The transition-duration attribute is used to set the transition effect time of the specified attribute. , which can be seconds (s) or milliseconds (ms).
transition-delay and transition-timing-function
transition-delay is used to set the time when the transition effect starts. The default is 0, which is OK It is seconds (s) or milliseconds (ms). If transition-delay is a negative number, it means that the transition effect starts early.
transition-timing-function is used to set the effects of transition. These effects include:
ease - slow at the beginning, fast in the middle, and slow at the end
ease-in - fade-in effect, slow in and fast out.
ease-out - fade-out effect, fast in and slow out.
ease-in-out - Start slow and end slow
cubic-bezier(n,n,n,n) - Define your own in the cubic-bezier function value. Possible values are numeric values between 0 and 1
Example:
button{ transition: background 1s ease-in-out 2s; -webkit-transition: background 1s ease-in-out 2s; /* Safari */ }
Multiple attributes
For multiple attributes, the effects of each attribute are separated by commas:
button{ transition: background 1s ease-in-out 2s, width 2s linear; -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */ }
##Compatibility
Internet Explorer 10, Firefox, Opera, and Chrome support the transition attribute. Safari supports an alternative -webkit-transition attribute. Internet Explorer 9 and earlier browsers do not support the transition attribute.Trigger
It should be noted that the transition effect requires attributes that have been defined before. The transition effect is applied through triggering, such as: hover, :focus, and :active etc. The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website! Related recommendations:How to use CSS3 to achieve ever-changing text shadow text-shadow effects
CSS3 animation to achieve a simple slideshow Carousel special effects
The above is the detailed content of About CSS3 using the transition attribute to achieve transition effects. For more information, please follow other related articles on the PHP Chinese website!