Realized a Baidu homepage of the egg--CSS3 animation introduction

In Baidu search has such an egg: Search "rotation", "jumping", "reversal" and other words, will appear corresponding animation effect (search "invert" effect). Viewing the source code can be found, these effects are achieved through the CSS3 animation property.

Realize this egg

In simple terms, it can be divided into three steps:

1. Implement some CSS animation classes, wait for the call;

2. Set up keywords and animation matching method;

3. Whenever the page load is complete, add the specified animation class to the body according to the keyword.

View Demo: Baidu Search for eggs

CSS3 Animation

　Animation: name duration timing-function delay iteration-count Direction;

The above equation is an abbreviated form of an animated declaration. There can be only one animation declaration in a CSS rule, and if declared more than once, the latter overrides the former. An abbreviated animation declaration is made up of the above sections, meaning the following table shows (from W3school):

value	Description
Animation-name	Specifies the name of the keyframe that needs to be bound to the selector.
Animation-duration	Specifies the amount of time, in seconds or milliseconds, that the animation will take to complete.
Animation-timing-function	Specifies the speed curve of the animation.
Animation-delay	Specifies the delay before the animation begins.
Animation-iteration-count	Specifies the number of times the animation should play.
Animation-direction	Specifies whether the animation should be rotated in reverse.

Animation-duration set the duration of the animation, in units of S or MS, not negative, note that its default value is 0, and when an animation declaration is created, the duration must be set in the property value, otherwise the animation will not execute.

Animation-timing-function represents the motion of an animation, you can use keywords such as ease-in,ease-in-out, or you can customize the motion curve with the cubic-bezier () function, or use step () function to make a frame-wise animation. The default value is ease.

The value of the animation-delay can be positively negative, the unit can be set to S or MS, and the default value is 0 (start immediately).

animation:5s Ease 1000ms normal none 1 myanimate; /* delay 1s start */ animation:5s ease 2s normal none 1 myanimate; /* delay 2s start */ /* start immediately but start at 1s at the beginning of the original animation */　　　　animation:5s ease-1s Normal none 1 myanimate; / * start position greater than or equal to the animation often, quickly switch to the end of animation status * / animation:5s ease-5s normal None 1 Myanimat e;　　　　

ANIMATION-ITERATION-COUNT Specifies the number of animation repetitions that can be set to a positive integer or a keyword infinite, indicating that the animation should repeat indefinitely. The default value is 1.

Animation-direction set the playback direction of the animation, a few commonly used properties such as normal means that the animation plays normally, reverse indicates that the animation is played in reverse, alternate that the animation in odd times (1, 3, 5 ...) is playing forward, in an even number of times (2, 4 , 6 ...) reverse playback. The default value is normal.

In writing, the above-mentioned animation attribute order can be garbled, can not write a value, the browser will automatically recognize the corresponding property values.

Animation:demo 1s ease-in-out 10; animation:10 ease-in-out demo 1s;

The above two CSS declarations all indicate that the animated name demo is executed 10 times in ease-in-out mode, each lasting 1s.

In addition, animation has two attribute values, andanimation-fill-mode specifies the state at the end of the animation: You can set the state of the animation to remain in its last position or revert to its original state. View Demo:animation-fill-mode DEMO;animation-play-state Specifies the current state of the animation and, if not set, the value of this property, regardless of whether the animation plays, plays out, or delay Running ". If the value of Animation-duration is 5s,animation-delay value is 2s, then the animation in this 7s and 7s animation-play-state values are running. When animating or delaying, you can use JavaScript to modify this property to pause the animation for "paused", which means that if an animation is delayed by 10s, we pause the animation when it is delay to 8s and then play the animation after 2s. The animation will still continue to delay2s before it starts playing. View Demo:css3 animation pause and play.

As mentioned above, animation has a Animation-name property that represents the name of the animation. In CSS, all animations are defined by keyframes (keyframes), we don't have to define the effect of each frame of the animation, but rather define the state of several keyframes, and the browser renders a smooth animation based on the few keyframes defined.

For example, a keyframes can be defined like this:

{            /* Note 0% no colon after */                transform: rotate (0deg);            } {transform: rotate (360deg);                }                                 }

0% and 100% can also be described using the keyword from and to respectively. If multiple keyframes have the same effect, you can write them together like this:

{            from,to {                transform: rotate (0deg);            } {transform: rotate (360deg);                }                                 }

　　A keyframes that can be used by multiple animation declarations at the same time.

An animated declaration that can use several different keyframes at the same time.

　　If there are two keyframes names for Key1 and Key2, the animated declaration is legal:

Animation:key1 20s, Key2.5s;

Two keyframes will take effect. DEMO: Two keyframes generated text input animations.

Summarize

We can change the elements of any CSS controllable property in the keyframes, or we can make multiple element animation effects in series, so that it can achieve a very beautiful visual effect. Here are two examples that show the practicality and charm of CSS3 animations.

1. Loading effect of website css4-selectors.com.

2.A pen by Webzhao: unfold the petals.

CSS3 animation has so many advantages, we'll talk about its main drawbacks in comparison to JavaScript animations, so that we can take advantage of the actual use of JavaScript animations and use the right approach at the right time.

　　1. Poor browser compatibility. Some browsers need to add exclusive prefixes, all of the demo in this article need to be viewed in the latest version of modern browser and ie10+, and JavaScript animation most of the time there is no compatibility issues. Can I use CSS3 Animation?

　　2. Interactivity is poor or not interactive. CSS animations can only be done in accordance with the defined key frames, or use pseudo-class mouse hover and other simple interaction, in fact, the interaction is not the category of CSS.

　　3. Coarse-grained animation control. compared to JavaScript-millisecond animation control, CSS3 's keyframes control is undoubtedly quite coarse-grained, and you can't control the size, position, and rotation of elements individually, and these controls are all plugged into the Transfrom attribute. You also can't change or control something when the animation is running, such as changing the direction of the animation, looking for a specific point in time, or binding a callback function to do something else.

　　4. The declaration cannot be reused. If two animations are just different values, but the objects are exactly the same, you still need to rewrite the keyframes again. While modern development can use sass and other means to reduce code writing, this does not affect the resulting CSS file code repetition rate is very high.

　　5. Some effects cannot be achieved. For example, complex easing curves, physics-based actions, etc. cannot be implemented by CSS3 animations.

How much do you know about JavaScript animations in my previous blog post? , the article mentions that CSS3 animations can enable hardware acceleration when compared to JavaScript animations, which is not strictly true.

First, using a 3D feature trigger (such as translate3d() or matrix3d() ) to allow the browser to create a GPU layer for this element allows JavaScript animations to use GPU acceleration, and second, not all CSS properties can get GPU acceleration in CSS3 animations, In fact, most of them are not.

Some simple animations take advantage of CSS3 to make it much easier than JavaScript, while some newer JavaScript animation libraries, such as GSAP and CSS3, can overcome the drawbacks of several CSS3 animations.

We don't seem to be able to mundane, and often compare CSS3 animations with JavaScript animations to try to be superior to each other. In fact, after recognizing the pros and cons of both, it is most important to choose the right solution according to the actual needs (it sounds nonsense, but it really can't be refuted).

The above comparison is quoted from an article on Css-tricks, although I think some shortcomings are too far-fetched, but I still enumerate it out. For example, interactivity and animation control , CSS itself is a markup language for typography and style, and it should be complementary to the programming language that is responsible for the interaction of JavaScript, If you do what JavaScript can do and what CSS does not do as a flaw in CSS, then I'm afraid it will be difficult to serve. Wu Di Orange Translated the article and posted it on his GitHub blog, where interested people can continue to read: eliminate doubts: CSS animations VS JavaScript.

Finish

Realized a Baidu homepage of the egg--CSS3 animation introduction