@ -2898,597 +2898,611 @@
}
}
} }
/* 定义一个名为zoomInDown的关键帧动画 */
@ keyframes zoomInDown { @ keyframes zoomInDown {
/* 动画开始时的状态 */
from {
from {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -1000px , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -1000px , 0 ) ; /* 缩小并向上移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -1000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -1000px , 0 ) ; /* 缩小并向上移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画进行到60%时的状态 */
60 % {
60 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ; /* 放大并向下移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ; /* 放大并向下移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 应用zoomInDown动画的类 */
. zoomInDown { . zoomInDown {
-webkit-animation-name : zoomInDown ;
-webkit-animation-name : zoomInDown ; /* 使用WebKit内核的浏览器 */
animation-name : zoomInDown ;
animation-name : zoomInDown ; /* 使用标准内核的浏览器 */
} }
/* 定义一个名为zoomInLeft的关键帧动画（ ）
@ -webkit-keyframes zoomInLeft { @ -webkit-keyframes zoomInLeft {
/* 动画开始时的状态 */
from {
from {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ; /* 缩小并向左移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ; /* 缩小并向左移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画进行到60%时的状态 */
60 % {
60 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ; /* 放大并向右移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ; /* 放大并向右移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 定义一个名为zoomInLeft的关键帧动画（ ）
@ keyframes zoomInLeft { @ keyframes zoomInLeft {
/* 动画开始时的状态 */
from {
from {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ; /* 缩小并向左移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( -1000px , 0 , 0 ) ; /* 缩小并向左移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画进行到60%时的状态 */
60 % {
60 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ; /* 放大并向右移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 10px , 0 , 0 ) ; /* 放大并向右移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 应用zoomInLeft动画的类 */
. zoomInLeft { . zoomInLeft {
-webkit-animation-name : zoomInLeft ;
-webkit-animation-name : zoomInLeft ; /* 使用WebKit内核的浏览器 */
animation-name : zoomInLeft ;
animation-name : zoomInLeft ; /* 使用标准内核的浏览器 */
} }
/* 定义一个名为zoomInRight的关键帧动画（ ）
@ -webkit-keyframes zoomInRight { @ -webkit-keyframes zoomInRight {
/* 动画开始时的状态 */
from {
from {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ; /* 缩小并向右移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ; /* 缩小并向右移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画进行到60%时的状态 */
60 % {
60 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ; /* 放大并向左移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ; /* 放大并向左移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 定义一个名为zoomInRight的关键帧动画 */
@ keyframes zoomInRight { @ keyframes zoomInRight {
/* 动画开始时的状态 */
from {
from {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ; /* 缩小并向右移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 1000px , 0 , 0 ) ; /* 缩小并向右移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画进行到60%时的状态 */
60 % {
60 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ; /* 放大并向左移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -10px , 0 , 0 ) ; /* 放大并向左移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 应用zoomInRight动画的类 */
. zoomInRight { . zoomInRight {
-webkit-animation-name : zoomInRight ;
-webkit-animation-name : zoomInRight ; /* 指定动画名称 */
animation-name : zoomInRight ;
animation-name : zoomInRight ; /* 指定动画名称 */
}
@ -webkit-keyframes zoomInUp {
from {
opacity : 0 ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 1000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 1000px , 0 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
}
60 % {
opacity : 1 ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
}
} }
/* 定义一个名为zoomInUp的关键帧动画 */
@ keyframes zoomInUp { @ keyframes zoomInUp {
/* 动画开始时的状态 */
from {
from {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 1000px , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 1000px , 0 ) ; /* 缩小并向下移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 1000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 1000px , 0 ) ; /* 缩小并向下移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画进行到60%时的状态 */
60 % {
60 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ; /* 放大并向上移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ; /* 放大并向上移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 应用zoomInUp动画的类 */
. zoomInUp { . zoomInUp {
-webkit-animation-name : zoomInUp ;
-webkit-animation-name : zoomInUp ; /* 指定动画名称 */
animation-name : zoomInUp ;
animation-name : zoomInUp ; /* 指定动画名称 */
}
@ -webkit-keyframes zoomOut {
from {
opacity : 1 ;
}
50 % {
opacity : 0 ;
-webkit-transform : scale3d ( 0 . 3 , 0 . 3 , 0 . 3 ) ;
transform : scale3d ( 0 . 3 , 0 . 3 , 0 . 3 ) ;
}
to {
opacity : 0 ;
}
} }
/* 定义一个名为zoomOut的关键帧动画 */
@ keyframes zoomOut { @ keyframes zoomOut {
/* 动画开始时的状态 */
from {
from {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
}
}
/* 动画进行到50%时的状态 */
50 % {
50 % {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 3 , 0 . 3 , 0 . 3 ) ;
-webkit-transform : scale3d ( 0 . 3 , 0 . 3 , 0 . 3 ) ; /* 缩小 */
transform : scale3d ( 0 . 3 , 0 . 3 , 0 . 3 ) ;
transform : scale3d ( 0 . 3 , 0 . 3 , 0 . 3 ) ; /* 缩小 */
}
}
/* 动画结束时的状态 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
}
}
} }
/* 应用zoomOut动画的类 */
. zoomOut { . zoomOut {
-webkit-animation-name : zoomOut ;
-webkit-animation-name : zoomOut ; /* 指定动画名称 */
animation-name : zoomOut ;
animation-name : zoomOut ; /* 指定动画名称 */
}
@ -webkit-keyframes zoomOutDown {
40 % {
opacity : 1 ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
}
to {
opacity : 0 ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 2000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 2000px , 0 ) ;
-webkit-transform-origin : center bottom ;
transform-origin : center bottom ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
}
} }
/* 定义一个名为zoomOutDown的关键帧动画 */
@ keyframes zoomOutDown { @ keyframes zoomOutDown {
/* 动画进行到40%时的状态 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ; /* 放大并向上移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , -60px , 0 ) ; /* 放大并向上移动 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 缓动函数 */
}
}
/* 动画结束时的状态 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 2000px , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 2000px , 0 ) ; /* 缩小并向下移动 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 2000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , 2000px , 0 ) ; /* 缩小并向下移动 */
-webkit-transform-origin : center bottom ;
-webkit-transform-origin : center bottom ; /* 变换原点在底部中心 */
transform-origin : center bottom ;
transform-origin : center bottom ; /* 变换原点在底部中心 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 缓动函数 */
}
}
} }
/* 应用zoomOutDown动画的类 */
. zoomOutDown { . zoomOutDown {
-webkit-animation-name : zoomOutDown ;
-webkit-animation-name : zoomOutDown ; /* 指定动画名称 */
animation-name : zoomOutDown ;
animation-name : zoomOutDown ; /* 指定动画名称 */
} }
@ -webkit-keyframes zoomOutLeft { /* 定义一个名为zoomOutLeft的关键帧动画 */
@ keyframes zoomOutLeft {
/* 动画进行到40%时的状态 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ; /* 放大并向右移动 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ; /* 放大并向右移动 */
}
}
/* 动画结束时的状态 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ; /* 缩小并向左移动 */
transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ; /* 缩小并向左移动 */
-webkit-transform-origin : left center ;
-webkit-transform-origin : left center ; /* 变换原点在左侧中心 */
transform-origin : left center ;
transform-origin : left center ; /* 变换原点在左侧中心 */
}
}
} }
/* 应用zoomOutLeft动画的类 */
. zoomOutLeft {
-webkit-animation-name : zoomOutLeft ; /* 指定动画名称 */
animation-name : zoomOutLeft ; /* 指定动画名称 */
}
/* 定义一个名为zoomOutLeft的关键帧动画 */
@ keyframes zoomOutLeft { @ keyframes zoomOutLeft {
/* 在动画的40%时 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 保持元素完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ; /* 缩小并向右移动元素 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 42px , 0 , 0 ) ; /* 缩小并向右移动元素 */
}
}
/* 动画结束时 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向左移动到视野外 */
transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向左移动到视野外 */
-webkit-transform-origin : left center ;
-webkit-transform-origin : left center ; /* 设置变换的原点为元素的左中心 */
transform-origin : left center ;
transform-origin : left center ; /* 设置变换的原点为元素的左中心 */
}
}
} }
/* 应用zoomOutLeft动画的类 */
. zoomOutLeft { . zoomOutLeft {
-webkit-animation-name : zoomOutLeft ;
-webkit-animation-name : zoomOutLeft ; /* 指定使用zoomOutLeft关键帧动画 */
animation-name : zoomOutLeft ;
animation-name : zoomOutLeft ; /* 指定使用zoomOutLeft关键帧动画 */
} }
/* 定义一个名为zoomOutRight的关键帧动画，
@ -webkit-keyframes zoomOutRight { @ -webkit-keyframes zoomOutRight {
/* 在动画的40%时 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 保持元素完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ; /* 缩小并向左移动元素 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ; /* 缩小并向左移动元素 */
}
}
/* 动画结束时 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
-webkit-transform-origin : right center ;
-webkit-transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
transform-origin : right center ;
transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
}
}
} }
/* 定义一个名为zoomOutRight的关键帧动画 */
@ keyframes zoomOutRight { @ keyframes zoomOutRight {
/* 在动画的40%时 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 保持元素完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ; /* 缩小并向左移动元素 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( -42px , 0 , 0 ) ; /* 缩小并向左移动元素 */
}
}
/* 动画结束时 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
-webkit-transform-origin : right center ;
-webkit-transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
transform-origin : right center ;
transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
}
}
} }
/* 应用zoomOutRight动画的类 */
. zoomOutRight { . zoomOutRight {
-webkit-animation-name : zoomOutRight ;
-webkit-animation-name : zoomOutRight ; /* 指定使用zoomOutRight关键帧动画 */
animation-name : zoomOutRight ;
animation-name : zoomOutRight ; /* 指定使用zoomOutRight关键帧动画 */
} }
/* 定义一个名为zoomOutUp的关键帧动画，
@ -webkit-keyframes zoomOutUp { @ -webkit-keyframes zoomOutUp {
/* 在动画的40%时 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 保持元素完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ; /* 缩小并向上移动元素 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ; /* 缩小并向上移动元素 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 自定义缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 自定义缓动函数 */
}
}
/* 动画结束时 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ; /* 将元素缩放到非常小并向下移动到视野外 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ; /* 将元素缩放到非常小并向下移动到视野外 */
-webkit-transform-origin : center bottom ;
-webkit-transform-origin : center bottom ; /* 设置变换的原点为元素的底部中心 */
transform-origin : center bottom ;
transform-origin : center bottom ; /* 设置变换的原点为元素的底部中心 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 自定义缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 自定义缓动函数 */
}
}
} }
/* 定义一个名为zoomOutUp的关键帧动画 */
@ keyframes zoomOutUp { @ keyframes zoomOutUp {
/* 在动画的40%时 */
40 % {
40 % {
opacity : 1 ;
opacity : 1 ; /* 保持元素完全不透明 */
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ;
-webkit-transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ; /* 缩小并向上移动元素 */
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ;
transform : scale3d ( 0 . 475 , 0 . 475 , 0 . 475 ) translate3d ( 0 , 60px , 0 ) ; /* 缩小并向上移动元素 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 自定义缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ;
animation-timing-function : cubic-bezier ( 0 . 55 , 0 . 055 , 0 . 675 , 0 . 19 ) ; /* 自定义缓动函数 */
}
}
/* 动画结束时 */
to {
to {
opacity : 0 ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ;
-webkit-transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ; /* 将元素缩放到非常小并向下移动到视野外 */
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ;
transform : scale3d ( 0 . 1 , 0 . 1 , 0 . 1 ) translate3d ( 0 , -2000px , 0 ) ; /* 将元素缩放到非常小并向下移动到视野外 */
-webkit-transform-origin : center bottom ;
-webkit-transform-origin : center bottom ; /* 设置变换的原点为元素的底部中心 */
transform-origin : center bottom ;
transform-origin : center bottom ; /* 设置变换的原点为元素的底部中心 */
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
-webkit-animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 自定义缓动函数 */
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ;
animation-timing-function : cubic-bezier ( 0 . 175 , 0 . 885 , 0 . 32 , 1 ) ; /* 自定义缓动函数 */
}
}
} }
/* 应用zoomOutUp动画的类 */
. zoomOutUp { . zoomOutUp {
-webkit-animation-name : zoomOutUp ;
-webkit-animation-name : zoomOutUp ; /* 指定使用zoomOutUp关键帧动画 */
animation-name : zoomOutUp ;
animation-name : zoomOutUp ; /* 指定使用zoomOutUp关键帧动画 */
} }
/* 定义一个名为slideInDown的关键帧动画，
@ -webkit-keyframes slideInDown { @ -webkit-keyframes slideInDown {
from {
from {
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
visibility : visible ;
visibility : visible ; /* 确保元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
}
}
} }
/* 定义一个名为slideInDown的关键帧动画 */
@ keyframes slideInDown { @ keyframes slideInDown {
from {
from {
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
visibility : visible ;
visibility : visible ; /* 确保元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
}
}
} }
/* 应用slideInDown动画的类 */
. slideInDown { . slideInDown {
-webkit-animation-name : slideInDown ;
-webkit-animation-name : slideInDown ; /* 指定使用slideInDown关键帧动画 */
animation-name : slideInDown ;
animation-name : slideInDown ; /* 指定使用slideInDown关键帧动画 */
} }
/* 定义从左侧滑入的动画 */
@ -webkit-keyframes slideInLeft { @ -webkit-keyframes slideInLeft {
from {
from {
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
visibility : visible ;
visibility : visible ; /* 元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
} }
@ keyframes slideInLeft { @ keyframes slideInLeft {
from {
from {
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
visibility : visible ;
visibility : visible ; /* 元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
} }
. slideInLeft { . slideInLeft {
-webkit-animation-name : slideInLeft ;
-webkit-animation-name : slideInLeft ; /* 使用slideInLeft动画 */
animation-name : slideInLeft ;
animation-name : slideInLeft ; /* 使用slideInLeft动画 */
} }
/* 定义从右侧滑入的动画 */
@ -webkit-keyframes slideInRight { @ -webkit-keyframes slideInRight {
from {
from {
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
visibility : visible ;
visibility : visible ; /* 元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
} }
@ keyframes slideInRight { @ keyframes slideInRight {
from {
from {
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
visibility : visible ;
visibility : visible ; /* 元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
} }
. slideInRight { . slideInRight {
-webkit-animation-name : slideInRight ;
-webkit-animation-name : slideInRight ; /* 使用slideInRight动画 */
animation-name : slideInRight ;
animation-name : slideInRight ; /* 使用slideInRight动画 */
} }
/* 定义从上方滑入的动画 */
@ -webkit-keyframes slideInUp { @ -webkit-keyframes slideInUp {
from {
from {
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
visibility : visible ;
visibility : visible ; /* 元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
} }
@ keyframes slideInUp { @ keyframes slideInUp {
from {
from {
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
visibility : visible ;
visibility : visible ; /* 元素可见 */
}
}
to {
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
} }
. slideInUp { . slideInUp {
-webkit-animation-name : slideInUp ;
-webkit-animation-name : slideInUp ; /* 使用slideInUp动画 */
animation-name : slideInUp ;
animation-name : slideInUp ; /* 使用slideInUp动画 */
} }
/* 定义向下滑动隐藏的动画 */
@ -webkit-keyframes slideOutDown { @ -webkit-keyframes slideOutDown {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
}
}
} }
@ keyframes slideOutDown { @ keyframes slideOutDown {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
}
}
} }
. slideOutDown { . slideOutDown {
-webkit-animation-name : slideOutDown ;
-webkit-animation-name : slideOutDown ; /* 使用slideOutDown动画 */
animation-name : slideOutDown ;
animation-name : slideOutDown ; /* 使用slideOutDown动画 */
} }
/* 定义向左滑动隐藏的动画 */
@ -webkit-keyframes slideOutLeft { @ -webkit-keyframes slideOutLeft {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
}
}
} }
@ keyframes slideOutLeft { @ keyframes slideOutLeft {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
}
}
} }
. slideOutLeft { . slideOutLeft {
-webkit-animation-name : slideOutLeft ;
-webkit-animation-name : slideOutLeft ; /* 使用slideOutLeft动画 */
animation-name : slideOutLeft ;
animation-name : slideOutLeft ; /* 使用slideOutLeft动画 */
} }
/* 定义向右滑动隐藏的动画 */
@ -webkit-keyframes slideOutRight { @ -webkit-keyframes slideOutRight {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
}
}
} }
@ keyframes slideOutRight { @ keyframes slideOutRight {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
}
}
} }
. slideOutRight { . slideOutRight {
-webkit-animation-name : slideOutRight ;
-webkit-animation-name : slideOutRight ; /* 使用slideOutRight动画 */
animation-name : slideOutRight ;
animation-name : slideOutRight ; /* 使用slideOutRight动画 */
} }
/* 定义向上滑动隐藏的动画 */
@ -webkit-keyframes slideOutUp { @ -webkit-keyframes slideOutUp {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
}
}
} }
@ keyframes slideOutUp { @ keyframes slideOutUp {
from {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
}
to {
to {
visibility : hidden ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
}
}
} }
. slideOutUp { . slideOutUp {
-webkit-animation-name : slideOutUp ;
-webkit-animation-name : slideOutUp ; /* 使用slideOutUp动画 */
animation-name : slideOutUp ;
animation-name : slideOutUp ; /* 使用slideOutUp动画 */
} }
HeJiaYan
zw-j2003