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

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

这篇文章主要介绍了如何使用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

















加入JS


复制代码
代码如下:


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

以上就是CSS3 实现侧边栏展开收起动画的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读