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

规则用于创建动画。@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
代码如下:
sidebar
淡进
淡出
向上淡进
向左淡出
加入js


高端网站建设公司需具备哪些标准
如何网站制作，网站建设开发基本流程
如何有效刷网站点击率？
电商卖家的引流三步走
企业网络营销效果怎样考核 企业老板看过来
电商网站SEO跳出率高的原因有哪些?
seo公司:关键词排名上不去怎么办
做高端网站建设必了解的新闻营销模式的优化！