2016.3.17 _ CSS3 animation _ 11th days

2016.3.17 _ CSS3 animation _ 11th days
CSS3 Animation

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many webpages.

Today's course Preview

1. Key Frame

To create an animation in CSS3, you need to learn the @ keyframes rule.

@ Keyframes rules are used to create animations.

Specify a CSS style in @ keyframes to create an animation effect that is gradually changed from the current style to the new style.

When we used transition to create a simple transition effect,

We include the initial and final attributes, a start execution action time, a continuation action time, and the change rate of the action,

In fact, these values are all median values. If we want to control more details,

For example, what actions I want to perform in the first time period and what actions I want to perform in the second time period?

(Switching to flash means what action I want to perform in the first frame and what action I want to perform in the second frame ),

In this way, it is very difficult to implement Transition. At this time, we also need such a "Key Frame" to control it.

In CSS3, this effect is achieved by the "keyframes" attribute. Next let's take a look at Keyframes:

Keyframes syntax rules,

@ Keyframes name1 {0% {property name: property value;} 29% {property name: property value;} 50% {property name: property value; property name: property value;} 100% {property name: property value ;}}

Let's explain the syntax rules:

The name must start with @ keyframes and be followed by the animation name. The name is defined by yourself and the semantics is best,

Add a pair of braces, which can contain many percentages, and add a pair of braces after percentages,

The attributes and attribute values to be changed are separated by semicolons.

In addition, you can use from instead of 0% to indicate the initial state, and use to instead of 100% to indicate the end state. The style is as follows:

@ Keyframes name1 {from {property name: property value;} 29% {property name: property value;} 50% {property name: property value; property name: property value;} to {property name: property value ;}}

2. browser prefix

Although keyframes has become a w3c standard attribute, for compatibility,

We need to add the kernel prefix to browsers such as Google and Safari.

Generally, five types of attributes are set.

-Webkit-: kernel (google chrome, safari, Cheetah, 360 speed version) x5: QQ browser, MS: Microsoft IE browser-o-: Opera (ou Peng browser, transferred to Google camp)-moz-: Firefox (netscape) 3. animation

When you create an animation in @ keyframes, bind it to a selector. Otherwise, no animation effect will be generated.

You can bind an animation to a selector by specifying at least two CSS3 animation attributes:

Specifies the animation name. specifies the animation duration.

Note: You must define the animation name and duration. If the duration is ignored, the animation is not allowed because the default value is 0.

Attribute	Description
@ Keyframes	Specifies the animation.
Animation	The short attribute of all animation properties except the animation-play-state attribute.
Animation-name	Specifies the name of the keyframes animation.
Animation-duration	Specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0.
Animation-timing-function	Specifies the animation speed curve. The default value is "renew ".
Animation-delay	Specifies when the animation starts. The default value is 0.
Animation-iteration-count	Specifies the number of times an animation is played. The default value is 1.
Animation-direction	Specifies whether the animation is played reversely in the next cycle. The default value is "normal ".
Animation-play-state	Specifies whether the animation is running or paused. The default value is "running ".
Animation-fill-mode	Specifies the State beyond the animation time of an object.

3.1 animation attributes

Animation name (animation-name). Name is the best way to differentiate things. Like everyone has their own names, our animations also have their own names. When learning keyframes above, we mentioned that we needDefine the frame nameThe name here is the name we used when defining the frame. It is an essential attribute.

Animation execution time (animation-duration). In the keyframes stage, we mentioned that percentage refers to the percentage of animation execution time, so the animation duration is also an essential attribute.Unit: seconds or milliseconds.

Animation execution count (animation-iteration-count). The animation execution time cannot be infinite, but sometimes we need to keep the animation running. In this case, we can define the number of executions of the animation as infinite, of course, you can also define 3, 4, 5, 6, 7, 8, and so on. Of course, the number of times to define depends on your needs.
-Webkit-animation-iteration-count: 10 ;(Infinite Unlimited)

Animation conversion rate (animation-timing-function). It is actually the playing method of an animation. It is the same as the transition-timing-function in the transition, and has the following conversion methods:Week, week-in, week-in-out, linear, cubic-bezr, Cubic-bezr refers to the besell curve, which will be discussed later.

Latency (animation-delay). There may be many animations on a page. Sometimes we want to play first and then play back. How can we achieve this. The animation introduces a property called latency, which specifies that the animation can be executed after the delay is specified.Unit: seconds or milliseconds.

Animation-direction). This parameter specifies the playback direction of an animation. It has only two values. The default value is normal. If it is set to normalEach loop is played forward.The other value is alternate, which plays an animation inThe number one is used for forward playback, And the number one is used for reverse playback..

Animation playback status (animation-play-state). There are two main values: running and paused. running is the default value. Their functions are similar to those of our music players.Paused: Stop the playing animation.You can also useRunning replays the paused animation.Here, replay is not necessarily played from the start of the element animation, but from the position where you paused. This attribute is rarely supported by the kernel, so you just need to mention it a little bit.

Animation-fill-mode). We often use:Forwards: After the animation is completed, keep the last attribute value (defined in the last key frame). In addition, there are three values: none: do not change the default behavior. Backwards: Apply the start attribute value (defined in the first key frame) before the animation is displayed within the period specified by animation-delay ). Both: both the forward and backward fill modes are applied.

Sample Code 3.2

When all animation attributes are connected together, the attribute arrangement times are

Animation: animation name + animation execution time + animation conversion rate + latency + animation execution times + movement direction

4. Third-party library animate.css

It would be very troublesome to write each motion on your own every time you write an animation,

So can there be an inventory with a lot of animations in it,

Every time we want to use an animation, we only need to extract it from this library, which makes it very convenient,

In this example, library animate.css appears, which encapsulates a lot of animations,

When we want to use the animation, we can use it directly. Next, let's look at the animation's third-party library animate.css.

We already know that this is a library that contains many animations,

The link is provided here,Http://www.17sucai.com/pins/demoshow/9411,

We can see different effects corresponding to different animation names. How can we use the animation here,

Its usage is very simple. For details, refer:

4.1 introduce a third-party library

4.2 specify the animation effect

Method 1:

Format:animation：”name“ time；

Example:animation：”flip” 2s;

It indicates that the animation execution time called flip is 2 s. We can see that this method is the same as what we just learned.

The complete code is as follows:

 

Method 2:

Format:

 

Example:

 

The complete code is as follows:

5. besell Curve

When learning transition, we have an attribute called transition-timing-function,

This attribute specifies the speed curve of the effect, which contains some attribute values,

Speed of the constant speed linear gradually slows down. Slow: slow: fast: Slow-in: fast: slow: in-out

In addition, we also have a parameter value named cubic-bezr, which allows you to customize a time curve. This is what we will talk about.

The béserz curve is an important parameter curve in computer graphics (2D, 3D called a surface ).

In 1962, the bersel curve was published by French engineer Pierre béserz, who used the curve to design the car's main body.

The quadratic curve is the most commonly used in our daily development.

Occasionally, cubic curves are used.

Of course there are more advanced ones, but we will not.

In daily development, we only need to determine the position of the anchor and control points.

For more attempts, refer to this website. We don't need you to pinpoint every point,

You only need to be able to guess where the point is.

Http://cubic-bezier.com/

Code implementation: