CSS3 implement side bar unwind animation

Rules are used to create animations.

A CSS style is defined in the @keyframes to create an animation effect that is gradually changed to the new style by the current style

When you create an animation in @keyframes, bundle it to a selector, otherwise it will not produce an animation effect.

You can bind an animation to a selector by providing at least two items of CSS3 animation properties:

Specify the name of the animation

Specify the length of the animation

Animation

The animation property is a shorthand property for setting animation properties:

Animation-name: Specify the name of the @keyframes animation.

Animation-duration: Specify the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.

Animation-timing-function: Specify the speed curve of the animation. The default is "ease".

Animation-delay: Specify when the animation starts. The default is 0

Animation-iteration-count: Specify the number of times the animation is played. The default is 1.

Animation-direction: Specify whether the animation will be played backwards in the next cycle. The default is "normal".

Animation-fill-mode: Specify the state outside the object's animation time

Side Sidebar Implementation

The code is as follows:

/* Animation Definition * *

@-webkit-keyframes Move_right {

from {

opacity:0;

}

to {

Opacity:1;

-webkit-transform:translatex (120px);

Transform:translatex (120px);

}

}

@keyframes Move_right {

from {

opacity:0;

}

to {

Opacity:1;

-webkit-transform:translatex (120px);

Transform:translatex (120px);

}

}

@-webkit-keyframes Move_left {

from {

Opacity:1;

}

to {

opacity:0;

-webkit-transform:translatex ( -120px);

Transform:translatex ( -120px);

}

}

@keyframes Move_left {

from {

Opacity:1;

}

to {

opacity:0;

-webkit-transform:translatex ( -120px);

Transform:translatex ( -120px);

}

}

@-webkit-keyframes move_up {

from {

opacity:0;

}

to {

Opacity:1;

-webkit-transform:translatey ( -250px);

Transform:translatey ( -250px);

}

}

@keyframes move_up {

from {

opacity:0;

}

to {

Opacity:1;

-webkit-transform:translatey ( -250px);

Transform:translatey ( -250px);

}

}

The code is as follows:

/* Animation Binding * *

. move_right {

-webkit-animation-name:move_right;

Animation-name:move_right;

-webkit-animation-duration:1s;

Animation-duration:1s;

-webkit-animation-iteration-count:1;

Animation-iteration-count:1;

-webkit-animation-fill-mode:forwards;

Animation-fill-mode:forwards;

}

. move_left {

-webkit-animation-name:move_left;

Animation-name:move_left;

-webkit-animation-duration:1s;

Animation-duration:1s;

-webkit-animation-iteration-count:1;

Animation-iteration-count:1;

-webkit-animation-fill-mode:forwards;

Animation-fill-mode:forwards;

}

. move_up {

-WEBKIT-ANIMATION-NAME:MOVE_UP;

ANIMATION-NAME:MOVE_UP;

-webkit-animation-duration:1s;

Animation-duration:1s;

-webkit-animation-iteration-count:1;

Animation-iteration-count:1;

-webkit-animation-fill-mode:forwards;

Animation-fill-mode:forwards;

}

. fadeIn {

-webkit-transform:translatex (120px);

Transform:translatex (120px);

Opacity:1;

}

. fadeinup {

-webkit-transform:translatey ( -250px);

Transform:translatey ( -250px);

Opacity:1;

-webkit-transition:-webkit-transform 2s ease-out,opacity 2s ease-out;

Transition:transform 2s ease-out, opacity 2s ease-out;

}

. fadeoutleft {

-webkit-transform:translatex ( -120px);

Transform:translatex ( -120px);

opacity:0.0;

-webkit-transition:-webkit-transform 2s ease-out,opacity 2s ease-out;

Transition:transform 2s ease-out, opacity 2s ease-out;

}

Html

The code is as follows:

Sidebar

Light in

Out

Light up into

Fade left

Add JS

The code is as follows:

The above is the use of CSS3 to make sidebar animation effect of the entire content and code, the small partners according to their own project needs to improve the landscaping under it can be OH.