这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画，并附上了示例代码，非常的详细，推荐给需要的小伙伴。

@keyframes

规则用于创建动画。

@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称

规定动画的时长animation

animation 属性是一个简写属性，用于设置动画属性：

animation-name：规定 @keyframes 动画的名称。

animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。

animation-timing-function：规定动画的速度曲线。默认是 "ease"。

animation-delay：规定动画何时开始。默认是 0

animation-iteration-count：规定动画被播放的次数。默认是 1。

animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。

animation-fill-mode：规定对象动画时间之外的状态

侧边栏实现/* 动画定义 */

@-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);

}

}/* 动画绑定 */

.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

demo

sidebar

淡进

淡出

向上淡进

向左淡出

加入JS

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');

}

以上就是使用CSS3制作侧边栏动画效果的全部内容和代码了，小伙伴们根据自己的项目需求来改善美化下就可以了哦。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：