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

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

Objective: to enhance the user experience and enhance the animation effect

You can set the properties of the transition: width and height, font size, color, margin, position change, etc.

Attribute name meaning and usage transition-property specifies the property to which the transition needs to be added transition-duration specifies the execution time transition-timing-function specifies the speed curve of the transition effect

Ease-specify the transition effect, start slowly, then accelerate, and then end slowly (default)

Linear-specifies the transition effect with the same speed from start to end

Ease-in-specifies the transition effect that starts slowly

Ease-out-specifies the transition effect that ends slowly

Ease-in-out-specifies the transition effect that starts and ends slowly

Cubic-bezier-allows you to define your own value transition-delay in the cubic Bezier function to specify the delay of the transition effect (in seconds) transition the previous time represents the time of the transition execution, the latter indicates the other, any other time of the transition delay

Gradually change an element from one style to another.

To achieve animation effects, you need to specify animation rules (keyframes)

@ keyframes move {

From {}

To {}

}

Or

@ keyframes move {

0% {}

25% {}

75% {}

75% {}

100% {}

}

The meaning of the attribute name @ keyframes Keyframe moveanimation-name (animation name) from indicates that the style before the start of the animation to indicates that the style at the end of the animation is equal to from25%, 50%. The middle style is 100% equivalent to to

Meaning and usage of attribute names animation-name Animation name for binding animation-duration defines how long it will take to complete the animation

If the animation-duration property is not specified, the animation will not occur because the default value is the 0sanimation-delay property that specifies the delay time for the animation to start

If a negative value is used, the animation will start to play as if it had been played for N seconds-iteration-count to specify the number of times the animation should run

Use the value "infinite" to make the animation last forever animation-direction specifies whether to play the animation forward, backward, or alternately.

Normal-the animation plays normally (forward). Default value

Reverse-Animation plays in the opposite direction (backward)

Alternate-the animation plays forward and then backwards

Alternate-reverse-the animation plays backwards and then animation-timing-function forward to specify the speed curve of the animation

Ease-specifies an animation that starts slowly, then speeds up, and then ends slowly (default)

Linear-specifies an animation with the same speed from start to finish

Ease-in-Animation that dictates a slow start

Ease-out-an animation that specifies a slow end

Ease-in-out-specify animations that start and end slowly

Cubic-bezier-run you define your own value in the cubic Bezier function animation-fill-mode to specify the style of the target element

None-default value. Animation does not apply any styles to elements before or after execution

Forwards-element will retain the style value set by the last Keyframe (dependent on animation-direction and animation-iteration-count)

Backwards-the element takes the style value set by the first Keyframe (depending on animation-direction) and retains that value during the animation delay

Both-Animation follows both forward and backward rules, extending animation properties in both directions

These are all the contents of the article "how to set the attributes of HTML elements". Thank you for reading! 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.