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

This article mainly introduces the common skills of making animation in CSS. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

Transition

There is a transition attribute in CSS, which can listen for the change of a CSS attribute, and achieve simple animation effects through the control of attribute changes:

The transition CSS property is an abbreviated attribute for transition-property,transition-duration,transition-timing-function and transition-delay.

Html code

Document .box {width: 200px; height: 50px; line-height: 50px; text-align: center; color: # fff; background: # 000; border-radius: 4px; / * use transition to listen for CSS attribute changes and animate it * / transition: background 1s ease-in-out 0.2s, color 3s, width 5s } .box: hover {width: 400px; color: # 000; background: # fff;} mouse hover view effect

Click here for the animation effect to view the address https://codepen.io/wjq990112/pen/PoqEemX

After the experience, now let's talk about how to use it:

Css code

Transition: transition-property | transition-duration | transition-timing-function | transition-delay

I don't think you can understand it. Let's take it apart one by one:

Css code

Transition-property: background; / * any CSS attribute you need to listen for changes * / transition-duration: 1s; / * set the length of transition animation * / transition-timing-function: ease-in-out; / * set the effect of transition animation * / transition-delay: 0.2s; / * set the delay to trigger the animation * /

The transition attribute is composed of the above four CSS attributes.

The first and second properties are required to specify the properties to which you want to add transition animation to listen and to specify the duration of the animation.

The third and fourth attribute is optional and is used to set the effect and delay of the transition animation.

For more information on the optional values of transition-timing-function, please see

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function

The first property has two special values: none: do not listen on any attributes all: listen on all attributes and add transition animation to them.

When the third attribute is omitted, the second time item is automatically resolved to the animation delay.

It's still a little hard to understand. Give me a chestnut:

Css code

Transition: background 1s ease-in-out 0.2s

The above example is part of the previous code.

It means to listen for changes in background and add a 1-second transition animation to it. The effect of the transition animation is that it starts slowly and ends slowly, and does not begin to execute until 0.2 seconds after the attribute change.

So this paragraph in the above code:

Css code

.box {width: 200px; height: 50px; line-height: 50px; text-align: center; color: # fff; background: # 000; border-radius: 4px; / * use transition to listen for CSS attribute changes and animate it * / transition: background 1s ease-in-out 0.2s, color 3s, width 5s;} .box:hover {width: 400px; color: # 000; background: # fff;}

The transition attribute in the code adds a transition animation to the background`color`width, and when these three attributes of the class=box tag change, the default or specified animation effects are automatically added to it.

Then we'll use it to do some advanced uses:

In the process of implementing animation, you may need to use a common method: overflow blindfold.

Used to achieve some effects similar to Tab switching:

Html code

Document .wrapper {width: 100px; height: 100px; overflow: hidden;} # tabs {display: flex; width: 200px; height: 100px; transition: transform 0.3s;} .tab-pane-1 {width: 100px; height: 100px; line-height: 100px; text-align: center Background: red;} .tab-pane-2 {width: 100px; height: 100px; line-height: 100px; text-align: center; background: yellow;} .transform {transform: translateX (- 50%);} 1 2

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.