CSS3怎么实现侧边栏展开收起动画

这篇文章主要讲解了“CSS3怎么实现侧边栏展开收起动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3怎么实现侧边栏展开收起动画”吧！

从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供成都网站制作、成都做网站、外贸营销网站建设、网站策划、网页设计、域名与空间、网络空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。

@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

代码如下:

   
   
   


   

加入JS

代码如下:

感谢各位的阅读，以上就是“CSS3怎么实现侧边栏展开收起动画”的内容了，经过本文的学习后，相信大家对CSS3怎么实现侧边栏展开收起动画这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！