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

This article introduces the relevant knowledge of "how to achieve multi-screen complex animation effects with CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Tip 1. Use animation-play-state to control the playback of animation on each screen

1. Class name active and Animation trigger

First of all, it is almost customary to use active to trigger animation on each screen, and it should also be recommended as the default industry standard.

In general, when a screen of content is entered, use JS to add the class name active to the container:

one

Container.classList.add ("active")

If your animation has a high frame, you want the animation to go through every time you browse this screen, and you can use reflow to trigger animation again:

one

two

three

Container.classList.remove ("active")

Container.offsetWidth=container.offsetWidth

Container.classList.add ("active")

two。 Class name active and Animation Control skills

How to control the playback of the animation? Our first reaction is usually implemented using the following method, where the complete CSS code of the animation is rendered in an active state, such as:

one

two

three

four

five

six

seven

eight

.element1 {/ * Dimensions and positioning * /}

.element2 {/ * size and positioning * /}

.element3 {/ * Dimensions and positioning * /}

...

.active.element1 {animate:name11s;}

.active.element2 {animate:name21s;}

.active.element3 {animate:name21s;}

...

From the implementation and function, the above method is very good, easy to understand, not easy to make mistakes. However, I personally prefer to use the animation-play-state attribute with CSS3 to control each screen animation. The implementation is as follows:

Animation-related CSS code is written directly on the element:

one

two

three

four

.element1 {/ * size and positioning * / animate:name11s;}

.element2 {/ * size and positioning * / animate:name21s;}

.element3 {/ * size and positioning * / animate:name31s;}

...

Create a class name, such as .animate, which is added to all elements that use animation animation

The CSS code is as follows:

one

two

three

four

five

six

.animate {

Animation-play-state:paused

}

.active.animate {

Animation-play-state:running

}

The reason why individuals prefer the latter approach is that there is a sense of "non-invasion", clear code hierarchy and clear control relationship. It is beneficial to maintenance and expansion in the later stage.

However, there are some things to pay attention to when using animation-play-state. For IE10/IE11 browsers, animation-play-state cannot be abbreviated. Such as:

one

.element {animate:shake4s2sbothinfinitepaused;}

It will only kill the whole CSS statement! It is supported as follows:

one

two

three

four

.element {

Animate:shake4s2sbothinfinite

Animation-play-state:paused

}

Some people may wonder why IE browsers are suddenly messed in.

First of all, we can't ignore the Windows Phone of mainstream mobile phones. Second, handsome flip-screen animation is not exclusive to the mobile, but also suitable for the desktop. With a little effort, the desktop movement is fully adapted, so why not!

Technique 2. Continuous animation in different states

Sometimes, animation may not be a wave of flow, divided into states.

The key point is animation decomposition and delay.

As far as I know, there is no way to achieve this effect with a single keyframes Keyframe declaration, because there are changes in animation state: an animation that is executed only once and an infinite loop animation.

What shall I do? We can decompose the animation and write 2 animation keyframes animation keyframes.

one

two

@ keyframesfadeIn {/ *... * /}

@ keyframesfloat {/ *... * /}

① extract Common Animation

This kind of multi-screen animation has N multi-elements to execute different animations at the same time. For example, the rocket fades out and then floats up and down; the flame of the rocket fades out and then changes in size; the black hole fades out and follows the waves left and right. How do you achieve it?

If you rely solely on animation syntax, it should be:

one

two

three

.element1 {animation:fadeIn1s,float.5s1sinfinite;} / * it takes 1 second for me to fade out; I start to float infinitely in 1 second * /

.element2 {animation:fadeIn1s,size.5s1sinfinite;} / * it takes 1 second for me to fade out; I start to change size in 1 second * /

.element3 {animation:fadeIn1s,move.5s1sinfinite;} / * it takes 1 second for me to fade out; I start to move left and right in 1 second * /

As you can see, fade-out is a common animation effect, and we can merge the common syntax with the help of nested tags and maintain it later:

one

two

three

four

.element-wrap {animation:fadeIn1s;} / * everyone fades out in 1 second * /

.element1 {animation:float.5s1sinfinite;} / * I will float infinitely in 1 second * /

.element2 {animation:size.5s1sinfinite;} / * I grow up and down after 1 second * /

.element3 {animation:move.5s1sinfinite;} / * I will move left and right in 1 second * /

② avoids transformation conflicts

There is an element animation in which the edge is rotated 360 degrees and the edge is zoomed in (from 0 to 100%). We obviously have to extract and share this kind of animation with typical features independently:

one

two

@ keyframesspin {/ * transform:rotate...*/}

@ keyframeszoomIn {/ * transform:scale...*/}

Okay, now here's the problem, zoom in and rotate:

one

.element {animation:spin1s,zoomIn1s;} / * rotation: Ah, it's over, I've been magnified and covered! , /

Due to the use of transform, cruel coverage has occurred. Of course, people with good things will say, "you just use zoom." Indeed, if it's just mobile, it's great to use zoom! However, in our enterprise activity, PC is the main battlefield, so FireFox browsers (FF does not recognize zoom) cannot be ignored.

What shall I do? Re-create an animation Keyframe description called spinZoomIn or?

Yeah, you just put a label on the outside and everything will be fine.

one

two

.element-wrap {animation:spin1s;} / * Let me look around * /

.element {animation:zoomIn1s;} / * I am big * /

Technique 3. Non-invasive location and centring location criteria

1. The term "non-intrusive positioning" refers to the positioning of elements that are not affected by animation and consists of two parts: one is not to use keyframes keyframes to determine the initial position, and the other is not to use attribute positioning that appears in keyframes.

1. Do not use keyframes to determine the initial position

As we all know, the fill-mode of CSS3 animation can determine the position of the element before and after the end of the animation, that is, it also has the role of positioning. At this time, there may be a small partner, pretending to be smart, using animation keyframes 0% {} or form {} to do positioning, it seems, but also save writing code. It looks great, but it's actually narrow, which is actually unfriendly to browsers that don't support or support animation, such as Android2.3 doesn't support animation-fill-mode and IE6-IE9 doesn't support CSS3 animation, so when confronted with these browsers, the layout of the page's animation elements is actually destroyed. Therefore, when positioning these animation elements, you need to use "non-invasive positioning", that is, even if the page does not have animation, I am still a "beautiful person".

two。 Do not use attribute positioning that appears in keyframes

For example, there is a ball that is positioned right in the center of the module and has an infinite rotation effect. It is more appropriate to use transform: translate (- 50% mam com 50%) to center the location, so I don't have to feel bad about it, so I use transform positioning. At this point, the conflict occurs, and the rotation animation also requires transform transformation.

one

two

three

four

@ keyframesspin {

0% {transform:rotate (0);}

100% {transform:rotate (360deg);}

}

Either you can use spin coverage, or you can't reuse it from a fresh start:

one

two

three

four

@ keyframesspin-trans {

0% {transform:rotate (0) translate (- 50% homemade 50%);}

100% {transform:rotate (360deg) translate (- 50% homemade 50%);}

}

Obviously, it's all inappropriate. It is recommended to use traditional left/top/margin for positioning, and transform transformation animation "non-intrusive".

two。 The "center positioning criterion" here consists of two parts: one is that the element is located in the middle of the container; the other is that the element is located in the middle of the container.

1. Element is positioned in the middle of the container

The container and the animation elements in the container can be regarded as an animation module. In order for this module to easily control the horizontal layout and vertical parts, the whole of the animation elements must be in the middle of the container. Do not be affected by the design draft or the surrounding environment.

To take a simple example, this article begins with the "Enterprise QQ- New year greetings" event.

The characteristics of users of enterprise products are relatively distinct: first, access is mainly concentrated on the desktop side, and second, 70% of 80% of users use webkit/blink kernel browsers. Therefore, you can understand why the design draft is clearly aimed at the desktop side, but there are so many delicate animation designs.

The story is like this, the desktop version is done, 1024-1224 adaptive, IE7 above are compatible (non-intrusive positioning criteria) (except for no animation), experience sharing: multi-screen complex animation CSS skills three! At this time, the students in charge of vision hope to be able to adapt to the mobile end and increase a certain amount of communication. I think it's good, so I decided to use technical means to make the activity page walk between the desktop and the mobile, at the same time, to ensure that all kinds of animation effects are very good!

two。 The positioning mode is centered positioning.

The so-called "central positioning" is relative to the "traditional positioning". The default values of modules and text in Web pages are stacked relative to the upper left corner, so, naturally, when we are refactoring the page, doing layout, and writing interaction effects, we are also relative to the upper left corner. Make use of the positioning features of the element itself, which is great and recommended! However, if you are dealing with multi-element CSS animation, you may need to change your habitual thinking, and it is important to "change from the upper left corner as the reference point to the center point as the reference point".

When we achieve multi-element animation effects, there will be two types of characters: one is the container; the other is the many animation elements in the container.

Among them, for container elements, especially when working on mobile products, we naturally let them be centered:

one

two

three

four

.container {

Position:absolute;left:50%;top:50%

Transform:translate3d (- 50% mai 50% meme 0)

}

In this way, we can center the display of mobile phones of all sizes (large sizes may need to be scaled).

However, have we ever thought of allowing many animation elements in the container to be centered and displayed?

Interpreted by code, it is positioned from the upper left corner (or upper right corner):

one

two

three

.example {

Position:absolute;left:100px;top:100px

}

Change to center point positioning + margin offset:

one

two

three

four

.example {

Position:absolute;left:50%;top:50%

Margin-left:-100px;margin-top:-100px

}

This is the end of the content of "how to achieve multi-screen complex animation effects in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.