@ -3141,354 +3141,381 @@
transform-origin : left center ;
}
}
/* 定义一个名为zoomOutLeft的关键帧动画 */
@ keyframes zoomOutLeft {
/* 在动画的40%时 */
40 % {
opacity : 1 ;
-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 ) ;
opacity : 1 ; /* 保持元素完全不透明 */
-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 ) ; /* 缩小并向右移动元素 */
}
/* 动画结束时 */
to {
opacity : 0 ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ;
-webkit-transform-origin : left center ;
transform-origin : left center ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向左移动到视野外 */
transform : scale ( 0 . 1 ) translate3d ( -2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向左移动到视野外 */
-webkit-transform-origin : left center ; /* 设置变换的原点为元素的左中心 */
transform-origin : left center ; /* 设置变换的原点为元素的左中心 */
}
}
/* 应用zoomOutLeft动画的类 */
. zoomOutLeft {
-webkit-animation-name : zoomOutLeft ;
animation-name : zoomOutLeft ;
-webkit-animation-name : zoomOutLeft ; /* 指定使用zoomOutLeft关键帧动画 */
animation-name : zoomOutLeft ; /* 指定使用zoomOutLeft关键帧动画 */
}
/* 定义一个名为zoomOutRight的关键帧动画, 用于兼容旧版WebKit浏览器 */
@ -webkit-keyframes zoomOutRight {
/* 在动画的40%时 */
40 % {
opacity : 1 ;
-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 ) ;
opacity : 1 ; /* 保持元素完全不透明 */
-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 ) ; /* 缩小并向左移动元素 */
}
/* 动画结束时 */
to {
opacity : 0 ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
-webkit-transform-origin : right center ;
transform-origin : right center ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
-webkit-transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
}
}
/* 定义一个名为zoomOutRight的关键帧动画 */
@ keyframes zoomOutRight {
/* 在动画的40%时 */
40 % {
opacity : 1 ;
-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 ) ;
opacity : 1 ; /* 保持元素完全不透明 */
-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 ) ; /* 缩小并向左移动元素 */
}
/* 动画结束时 */
to {
opacity : 0 ;
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ;
-webkit-transform-origin : right center ;
transform-origin : right center ;
opacity : 0 ; /* 完全透明 */
-webkit-transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
transform : scale ( 0 . 1 ) translate3d ( 2000px , 0 , 0 ) ; /* 将元素缩放到非常小并向右移动到视野外 */
-webkit-transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
transform-origin : right center ; /* 设置变换的原点为元素的右中心 */
}
}
/* 应用zoomOutRight动画的类 */
. zoomOutRight {
-webkit-animation-name : zoomOutRight ;
animation-name : zoomOutRight ;
-webkit-animation-name : zoomOutRight ; /* 指定使用zoomOutRight关键帧动画 */
animation-name : zoomOutRight ; /* 指定使用zoomOutRight关键帧动画 */
}
/* 定义一个名为zoomOutUp的关键帧动画, 用于兼容旧版WebKit浏览器 */
@ -webkit-keyframes zoomOutUp {
/* 在动画的40%时 */
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 ) ;
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 ) ;
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 ) ; /* 自定义缓动函数 */
}
}
/* 定义一个名为zoomOutUp的关键帧动画 */
@ keyframes zoomOutUp {
/* 在动画的40%时 */
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 ) ;
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 ) ;
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 ) ; /* 自定义缓动函数 */
}
}
/* 应用zoomOutUp动画的类 */
. zoomOutUp {
-webkit-animation-name : zoomOutUp ;
animation-name : zoomOutUp ;
-webkit-animation-name : zoomOutUp ; /* 指定使用zoomOutUp关键帧动画 */
animation-name : zoomOutUp ; /* 指定使用zoomOutUp关键帧动画 */
}
/* 定义一个名为slideInDown的关键帧动画, 用于兼容旧版WebKit浏览器 */
@ -webkit-keyframes slideInDown {
from {
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
visibility : visible ; /* 确保元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
}
}
/* 定义一个名为slideInDown的关键帧动画 */
@ keyframes slideInDown {
from {
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
transform : translate3d ( 0 , -100 % , 0 ) ; /* 从上方开始移动 */
visibility : visible ; /* 确保元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 回到原始位置 */
}
}
/* 应用slideInDown动画的类 */
. slideInDown {
-webkit-animation-name : slideInDown ;
animation-name : slideInDown ;
-webkit-animation-name : slideInDown ; /* 指定使用slideInDown关键帧动画 */
animation-name : slideInDown ; /* 指定使用slideInDown关键帧动画 */
}
/* 定义从左侧滑入的动画 */
@ -webkit-keyframes slideInLeft {
from {
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
visibility : visible ; /* 元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
@ keyframes slideInLeft {
from {
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ; /* 初始位置在屏幕左侧外 */
visibility : visible ; /* 元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
. slideInLeft {
-webkit-animation-name : slideInLeft ;
animation-name : slideInLeft ;
-webkit-animation-name : slideInLeft ; /* 使用slideInLeft动画 */
animation-name : slideInLeft ; /* 使用slideInLeft动画 */
}
/* 定义从右侧滑入的动画 */
@ -webkit-keyframes slideInRight {
from {
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
visibility : visible ; /* 元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
@ keyframes slideInRight {
from {
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ; /* 初始位置在屏幕右侧外 */
visibility : visible ; /* 元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
. slideInRight {
-webkit-animation-name : slideInRight ;
animation-name : slideInRight ;
-webkit-animation-name : slideInRight ; /* 使用slideInRight动画 */
animation-name : slideInRight ; /* 使用slideInRight动画 */
}
/* 定义从上方滑入的动画 */
@ -webkit-keyframes slideInUp {
from {
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
visibility : visible ; /* 元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
@ keyframes slideInUp {
from {
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ;
visibility : visible ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
transform : translate3d ( 0 , 100 % , 0 ) ; /* 初始位置在屏幕上方外 */
visibility : visible ; /* 元素可见 */
}
to {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 最终位置回到原位 */
}
}
. slideInUp {
-webkit-animation-name : slideInUp ;
animation-name : slideInUp ;
-webkit-animation-name : slideInUp ; /* 使用slideInUp动画 */
animation-name : slideInUp ; /* 使用slideInUp动画 */
}
/* 定义向下滑动隐藏的动画 */
@ -webkit-keyframes slideOutDown {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
}
}
@ keyframes slideOutDown {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ;
transform : translate3d ( 0 , 100 % , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
transform : translate3d ( 0 , 100 % , 0 ) ; /* 最终位置在屏幕下方外 */
}
}
. slideOutDown {
-webkit-animation-name : slideOutDown ;
animation-name : slideOutDown ;
-webkit-animation-name : slideOutDown ; /* 使用slideOutDown动画 */
animation-name : slideOutDown ; /* 使用slideOutDown动画 */
}
/* 定义向左滑动隐藏的动画 */
@ -webkit-keyframes slideOutLeft {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
}
}
@ keyframes slideOutLeft {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ;
transform : translate3d ( -100 % , 0 , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
transform : translate3d ( -100 % , 0 , 0 ) ; /* 最终位置在屏幕左侧外 */
}
}
. slideOutLeft {
-webkit-animation-name : slideOutLeft ;
animation-name : slideOutLeft ;
-webkit-animation-name : slideOutLeft ; /* 使用slideOutLeft动画 */
animation-name : slideOutLeft ; /* 使用slideOutLeft动画 */
}
/* 定义向右滑动隐藏的动画 */
@ -webkit-keyframes slideOutRight {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
}
}
@ keyframes slideOutRight {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ;
transform : translate3d ( 100 % , 0 , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
transform : translate3d ( 100 % , 0 , 0 ) ; /* 最终位置在屏幕右侧外 */
}
}
. slideOutRight {
-webkit-animation-name : slideOutRight ;
animation-name : slideOutRight ;
-webkit-animation-name : slideOutRight ; /* 使用slideOutRight动画 */
animation-name : slideOutRight ; /* 使用slideOutRight动画 */
}
/* 定义向上滑动隐藏的动画 */
@ -webkit-keyframes slideOutUp {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
}
}
@ keyframes slideOutUp {
from {
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
transform : translate3d ( 0 , 0 , 0 ) ; /* 初始位置在原位 */
}
to {
visibility : hidden ;
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ;
transform : translate3d ( 0 , -100 % , 0 ) ;
visibility : hidden ; /* 元素不可见 */
-webkit-transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
transform : translate3d ( 0 , -100 % , 0 ) ; /* 最终位置在屏幕上方外 */
}
}
. slideOutUp {
-webkit-animation-name : slideOutUp ;
animation-name : slideOutUp ;
-webkit-animation-name : slideOutUp ; /* 使用slideOutUp动画 */
animation-name : slideOutUp ; /* 使用slideOutUp动画 */
}