Shulou(Shulou.com)06/02 Report--

Today, the editor will share with you the relevant knowledge points about how to use css3 transition attributes. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

The attributes used in css3 transition are: 1, transition;2, transition-property;3, transition-duration;4, transition-timing-function;5, transition-delay.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

A CSS3 transition is the effect of a gradual change of elements from one style to another.

To achieve this, two things must be specified:

Specify the CSS property to which you want to add an effect

Specifies the duration of the effect.

By transitioning the transition property, web front-end developers can achieve simple animation interactions without the need for javascript, and to achieve this, you must implement something that specifies the duration of the effect.

Css3 transition Properties

Property describes the CSStransition shorthand property, which is used to set four transition properties in one property. 3transition-property specifies the name of the CSS attribute to which the transition is applied. 3transition-duration defines how long it takes to transition the effect. The default is 0. 3transition-timing-function specifies the time curve of the transition effect. Default is "ease". The 3transition-delay specifies when the transition effect begins. The default is 0. three

Compound attribute

These four sub-attributes of the transition transition are only required and cannot be 0. Among them, and are all time. When two times occur at the same time, the first is, the second is; when there is only one time, it is, and the default value is 0

Transition: |

[note] these four sub-attributes of transition cannot be separated by commas, only by spaces. Because comma-separated attributes represent different attributes (the transition attribute supports multi-values, which will be described later), space-separated attributes represent four transition-related subattributes of different attributes.

.test {border: 1px solid red; width: 100px; height: 50px; transition: 2s transition * represents a duration of 2s, and the delay time defaults to 0 * / * transition: 1s 2s; represents a duration of 1s and a delay time of 2s * /} .test: hover {width: 300px;}

Related sub-attribute

1 、 transition-property

The transition-property attribute specifies the nametransition effect of the CSS property (the transition effect initiates a change to the specified CSS property). None: no style is specified, all: default value, which represents all styles that support the transition-property attribute of the specified element. Transitive style, multiple styles can be written separately by commas.

Note: always specify the transition-duration attribute, otherwise the duration of 0 minutes will not have any effect.

1), transitive style

Not all CSS style values can be transitioned, and only properties with intermediate values have a transition effect, as follows

Color: color background-color border-color outline-color position: backround-position left right top bottom length: [1] max-height min-height max-width min-width height width [2] border-width margin padding outline-width outline-offset [3] font-size line-height text-indent vertical-align [4] border-spacing letter-spacing word-spacing number: opacity visibility z-index font-weight zoom combination: text-shadow transform box-shadow clip other: Gradient .test {border: 1px solid red Width: 100px; height: 50px; background-color: lightblue; transition: width 2s, background-color 2s ease 0.5s; / * indicates that the width duration is 2s, and the delay time is 0 by default Background-color duration 2s delay 0.5s * /} .test: hover {width: 300px; background-color: indianred;}

Effect picture:

2 、 transition-duration

The transition-duration property specifies the time (in seconds or milliseconds) it takes to complete the transition effect. Default value: 0s.

[note] this property cannot be negative.

[note] if the property is 0s, it is the default value, and if it is 0, it is invalid. So you have to bring a unit.

[note] when the value is single, all transition attributes correspond to the same time; when the value is multiple, the transition attributes correspond to the duration in order.

3 、 transition-timing-function

The transition-timing-function property specifies the speed at which to switch effects. It can take a few values. Default value: ease.

Value describes the transition effect specified by linear from start to end at the same speed, that is, uniform speed. (equal to cubic-bezier). Ease prescribes the transition effect of starting slowly, then getting faster, and then ending slowly (cubic-bezier (0.25pl 0.1pl 0.25pl 1)). Ease-in stipulates that the transition effect begins at a slow speed (equal to cubic-bezier (0.42). Ease-out specifies the transition effect that ends at a slow speed (equal to cubic-bezier). Ease-in-out specifies the transition effect that starts and ends slowly (equal to cubic-bezier (0.42, 0.58, and 1). Cubic-bezier defines its value in the cubic-bezier function. The possible values are values between 0 and 1.

4 、 transition-delay

The transition-delay property specifies when the switching effect will begin, and the value is in seconds (S) or milliseconds (ms). Default value: 0s.

[note] if the attribute is negative, there is no delay effect, but the starting value of the transition element will change from 0 to the set value (set value = delay time + duration). If the set value is less than or equal to 0, there is no transition effect; if the set value is greater than 0, the transition element completes the remaining transition effect from the set value [note] if the attribute is 0s, it is the default value, if 0 is the invalid value. So you have to bring a unit.

[note] when the value is single, all transition attributes correspond to the same time; when the value is multiple, the transition attributes correspond to the duration in order.

transition stage

The transition start time = the time when the style changes + the transition delay time, and the transition end time = the transition start time + transition duration.

The transition start value = the transition attribute value before the transition, and the transition end value = the transition attribute value after the transition is complete.

The transition is divided into two stages: forward (forward) and reverse (reverse). If the forward phase enters the reverse phase after a period of time, the initial value of the reverse phase is the instantaneous value at the end of the forward phase.

Take hover as an example, if you set transition when the element is not in the hover state, it is equivalent to setting the reverse state. And forward and reverse are the same. If transition is set in the element hover state, the forward state is set by the hover state, while the reverse state is set by the non-hover state.

.test {border: 1px solid red; width: 100px; height: 50px; transition: 3s transposition * set reverse state * /} .test: hover {width: 300px; transition: 100ms;}

Effect:

Trigger mode

Generally speaking, there are three ways to trigger transition transition, which are pseudo-class trigger, media query trigger and javascript trigger. The common pseudo-class triggers include: hover,: focus,: active and so on.

Hover: mouse hover trigger.

Active: triggered when the user clicks an element and holds down the mouse.

Focus: triggered when focus is obtained.

@ media trigger: triggered when media query conditions are met.

/ * trigger * / @ media (max-width: 1000px) {.test {width: 500px;}} when dragging the browser width to less than 1000px. Thank you for reading this article entitled "how to use css3 transition properties". I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.