How to use CSS3 to expand the sidebar and fold up the animation
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!
