|
|
@ -2898,249 +2898,236 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 定义一个名为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内核) */
|
|
|
|
@-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内核) */
|
|
|
|
@-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的关键帧动画 */
|
|
|
|
/* 定义一个名为zoomOutLeft的关键帧动画 */
|
|
|
|
@keyframes zoomOutLeft {
|
|
|
|
@keyframes zoomOutLeft {
|
|
|
|
/* 在动画的40%时 */
|
|
|
|
/* 在动画的40%时 */
|
|
|
|