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

This article is to share with you about the excessive use of Transition and Animation animation attributes in CSS3. I think it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

Transition (excessive)

Transition allows the attribute values of CSS to transition smoothly over a certain period of time. This effect can be triggered by a mouse click, focus, click, or any change to the element, and gracefully change the attribute value of the CSS with an animation effect, and its syntax is as follows:

CSS Code copies content to the clipboard

Transition: property duration timing-function delay; / * property: property to perform the transition duration: duration of the transition timing-function: rate mode of the transition delay: how long to execute * /

Transition-property

Available values:

None

No attributes will have a transition effect.

All

All properties will have a transition effect.

Property

Defines a comma-separated list of CSS attribute names to which the transition effect is applied.

CSS Code copies content to the clipboard

Div {transition-property:width;-moz-transition-property: width;/* Firefox 4 * /-webkit-transition-property:width; / * Safari and Chrome * /-Opera * /}

Transition-duration

The parameter is time, in s (seconds) or ms (milliseconds), and the default is 0. Recall that if there is only the transform attribute, the transformation is completed in one fell swoop.

CSS Code copies content to the clipboard

Div {transition-duration: 5s;-moz-transition-duration: 5s; / * Firefox 4 * /-webkit-transition-duration: 5s; / * Safari and Chrome * /-o-transition-duration: 5s; / * Opera * /}

Transition-timing-function

Since it is an animation, then there is the speed of the animation, different speeds will produce different results, the following are the recommended values.

Ease: (slows down gradually) default value, ease function is equivalent to Bezier curve (0.25,0.1,0.25,1.0).

Linear: (uniform velocity), linear function is equivalent to Bezier curve (0.0,0.0,1.0,1.0).

Ease-in: (acceleration), ease-in function is equivalent to Bezier curve (0.42,0,1.0,1.0).

Ease-out: (deceleration), ease-out function is equivalent to Bezier curve (0,0,0.58,1.0).

Ease-in-out: (accelerate and then decelerate), ease-in-out function is equivalent to Bezier curve (0.42,0,0.58,1.0)

Transition-delay

The parameter is time, in s (seconds) or ms (milliseconds). The default is 0, which is executed immediately, and it will come in handy if there is a direct sequence in multiple animations.

Animation (Animation)

Keyframe Keyframe

Implement custom animation by setting keyframes, that is, specifying the animation style on a specific node from the start point (0%) to the end point (100%). It's like getting up, opening your eyes (0%), standing up (10%), wearing a top (40%), wearing pants (80%), and tidying up your face (100%). Stringing each node together is an animation.

Besides, animation.

Animation, the key lies in moving words, then for the elements on the page, what can change is its style attributes, such as using animation to specify custom animation, the content of font-size from 18px to 28px, this is motion, plus its own attributes (it can specify the duration of the animation, the form of movement, etc.), it can show a dynamic effect, rather than an instant change.

Usually, if transition wants to achieve animation, it usually needs to be triggered by the hover pseudo-class, otherwise it will have finished moving and keep the final state of motion when the page is loaded, which is not what we want. Unlike animation, it has more forms of expression, making it look as if it was born to move.

Grammar

CSS Code copies content to the clipboard

.area {width: 50px; height: 50px; margin-left: 100px; background: blue;-webkit-animation-name:'demo';/* animation attribute name, which is the animation name we defined earlier by keyframes * /-webkit-animation-duration: 10s ease-in-out * Animation duration * /-webkit-animation-timing-function: ease-in-out / * the frequency of animation is the same as that of transition-timing-function * /-webkit-animation-delay: 2spotential * Animation delay time * /-webkit-animation-iteration-count: infinite;/* defines circular data, and infinite defines animation mode for infinite times * /-webkit-animation-direction: alternate;/* * /}

Examples and abbreviations

What we need to pay attention to is the last attribute, direction. We can think of it this way. This is an animation from place A to place B. when it is set to normal, the second playback starts from scratch, which is very abrupt. At this time, you need to use alternate to make it look like A moves back and forth between An and B. the code is as follows:

CSS Code copies content to the clipboard

/ * both An and B balls are positioned by absolutely, and so are small balls. As long as you control the left value, * / I added an animation called demo1 to this small ball / / you see, it moves on its own. Recall that when using transform, do you still have to use hover to trigger-webkit-animation: 'demo1' 2s linear infinite alternate? -o-animation: 'demo1' 2s linear infinite alternate; animation:' demo1' 2s linear infinite alternate;} / / define the animation part / / I only wrote-webkit, adding @-0q to the real world. @-webkit-keyframes demo1 {from {left:200px; background-color: lightcoral;} 50% {left:290px Background-color: lightblue;} to {left:380px; background-color: lightseagreen;}}

Alternate mode, play it backwards after playing it.

In normal mode, it means to play it again after replaying it.

These are the key points of the excessive use of Transition and Animation animation attributes in CSS3. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow 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.