A chestnut Getting started CSS3 animation

Recently assorted a lot of things, a lot of knowledge can not be summed up, it is time to summarize, open a new chapter ~

This article does not enumerate the properties of the CSS3 animation, if you need to know the API, you can go to MDN

Before we start the chestnut, we'll fill in the basics.

CSS3 Animation Classification:

• Motion tweens – animations that are consistent
• Frames-Per-frame animation – jumping with steps transitions

Animation Common Properties and scenarios:

Animation:name Duration timing-function delay iteration-count direction;

1. Timing-function Properties:

• Ease the transition effect that starts at a slow speed, then gets faster and then ends slowly.

• The ease-in specifies a transition effect that starts at a slow speed.

• Ease-out a transition effect that ends at a slow speed.

• EASE-IN-OUT Specifies the transition effect at a slow start and end.

• Linear animations are the same speed from beginning to end.

• Cubic-bezier (N,n,n,n) has its own value in the Cubic-bezier function, and n is the value of 0~1

• Steps ()

2. Delay property: Used to stagger the timing of animations with other animations and drop animations at different points in time. This property is very useful ~

Animation principle:

1. Motion generally has a inertia, so we have to have a slow rebound before fast.
2. Background flashing with multiple stars, misaligned

Use with JS

Slide.addeventlistener ("Webkitanimationend", function () {   console.log (' eeee ')//end of Animation call});

There are situations where we need to make sure that the animation ends with some other interaction that can be monitored using this event.

Combat Drills:

If we need to implement a simple animation like this:

Looking closely at the animation above, we found that it can be composed of the following 3 parts:

1. Entrance animation-move from right to left

2. Circular movement around

3. Frames-per-frame animation

Implementation method:

With 3 DOM elements, the outermost DOM implements the entry animation, the second layer of DOM implements the left and right movement, and the third layer of the DOM implements frame-wise animation.

Advantages: Easy Commissioning, save time.

Cons: Dom many.

1. DOM Structure

 <  div  class  = "Anima_entrance"     >  <  div  class  = "Anima_move"         >  <  div  class  = "Anima_sprite"  ></ div     >  </ div  >  </ div  >  

2. Analyze the timeline formed by the animation:

The entry animation lasts 0.6s, plays only once, moves left and right, and frames the animation continuously 2s, looping, the code is as follows:

{    animation: anima_entrance. 6s ease-in-out both;}  {    animation: anima_move 2s linear. 6s infinite both;}  {    animation: anima_sprite 2s step-end. 6s infinite both;}

3. Use steps () to animate frames per frame:Use this sprite chart below to change the background-position for animation switching.Pedal pedal, the effect as shown below, is not very disappointed??cause: Because animation transitions by default in ease mode, it inserts motion tweens between each keyframe, so the animation effect is consistent. You can now use steps () to cancel the motion tween. Paste a diagram:

• Steps (1,start): The animation jumps to 100% at the beginning until the end of the frame (not the entire cycle) = = Step-start
• Steps (1,end): Keep the style of 0% until the end of this frame (not the entire cycle) = = Step-end

Next, we change the timing-function into Step-end, the effect is as follows:

Animation:sprite 2s step-end. 6s Infinite both;

The effect that you want to have, ha ~ good.

The complete CSS code is as follows:

1 . Anima_entrance{2 position:Absolute;3 Z-index:3;4 Top:5.1rem;5  Left:4.05rem;6 width:12.9rem;7 Height:19.1rem;8 -webkit-animation:anima_entrance. 6s Ease-in-out both;9 Animation:anima_entrance. 6s Ease-in-out both;Ten} One  A . Anima_move{ - width:218px; - Height:382px; the position:Absolute; - Z-index:1; - Top:0; -  Left:42px; + -webkit-animation:anima_move 2s linear. 6s Infinite both; - Animation:anima_move 2s linear. 6s Infinite both; +} A  at . Anima_sprite{ - width:218px; - Height:382px; - background:URL (demo.png) no-repeat 0 0; - background-size:25.8rem 19.1rem; - -webkit-animation:anima_sprite 2s step-end. 6s Infinite both; in Animation:anima_sprite 2s step-end. 6s Infinite both; -} to  + @keyframes anima_entrance{ - 0% { the -webkit-transform:Translate3d (18.75rem, 0, 0); * Transform:Translate3d (18.75rem, 0, 0); $}Panax Notoginseng 100%{ - -webkit-transform:translate3d (0, 0, 0); the Transform:translate3d (0, 0, 0); +} A } the  + @keyframes Anima_move{ - 0%, 16%, 42%, 74%, 100% { $ -webkit-transform:translate3d (0, 0, 0); $ Transform:translate3d (0, 0, 0); -} - 29%{ the -webkit-transform:Translate3d ( -1rem, 0, 0); - Transform:Translate3d ( -1rem, 0, 0);Wuyi} the 87%{ - -webkit-transform:Translate3d (1rem, 0, 0); Wu Transform:Translate3d (1rem, 0, 0); -} About } $  - @keyframes Anima_sprite{ - 0%, 16%, 42%, 58%, 74%, 100% { - background-position:-12.9rem 0; A} + 8%, 50%, 66%{ the background-position:0 0; -} $ }

View Code

A chestnut Getting started CSS3 animation