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

This article mainly introduces how to use CSS3 to achieve the sidebar to unfold the animation, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

@ keyframes

Rules are used to create animations.

If you specify a CSS style in @ keyframes, you can create an animation effect that gradually changes from the current style to the new style.

When you create an animation in @ keyframes, tie it to a selector, otherwise there will be no animation.

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

Specify the name of the animation

Specify the duration of the animation

Animation

The animation property is an abbreviated property that is used to animate properties:

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

Animation-duration: specifies the seconds or milliseconds it takes for an animation to complete a cycle. The default is 0.

Animation-timing-function: specifies the speed curve of the animation. Default is "ease".

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

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

Animation-direction: specifies whether the animation is played in reverse in the next cycle. Default is "normal".

Animation-fill-mode: states outside the animation time of the specified object

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)

}

}

Copy the code

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

Copy the code

The code is as follows:

Demo

Sidebar

Fade out

Fade to the left

Join JS

Copy the code

The code is as follows:

Var sidebarEl = document.querySelector (".sidebar")

Function fadeIn (e) {

SidebarEl.className = 'sidebar fullHeight'

SidebarEl.style.top = '0px'

SidebarEl.style.left = '0px'

SidebarEl.classList.add ('move_right')

}

Function fadeOut (e) {

SidebarEl.className = 'sidebar fullHeight'

SidebarEl.style.left = '120px'

SidebarEl.classList.add ('move_left')

}

Function fadeInUp (e) {

SidebarEl.className = 'sidebar fullHeight'

SidebarEl.style.top = '250px'

SidebarEl.style.left = '120px'

SidebarEl.classList.add ('move_up')

}

Function fadeOutLeft (e) {

SidebarEl.className = 'sidebar fullHeight'

SidebarEl.style.top = '0px'

SidebarEl.style.left = '120px'

SidebarEl.classList.add ('move_left')

}

Thank you for reading this article carefully. I hope the article "how to use CSS3 to expand and put away animation in the sidebar" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.