常用css动画
// 上滑动画.slide-up-before {
opacity: 0;
display: none;
}
.slide-up-enter {
opacity: 0;
}
.slide-up-enter-active {
animation: slide-up 0.3s 0s ease-in; display: block;
}
.slide-up-exit {
opacity: 1;
}
.slide-up-exit-active {
animation: slide-up 0.3s 0s reverse;
}
// 下拉动画.slide-down-enter-active {
animation: slide-down 0.4s 0s ease-in-out;
}
.slide-down-exit-active {
animation: slide-down 0.4s 0s reverse;
}
// 左滑动画.slide-left-enter-active {
animation: slide-left 0.3s 0s ease-in-out;
}
.slide-left-exit-active {
animation: slide-left-exit 0.3s 0s ease-in-out;
}
// 右滑动画
.slide-right-enter-active {
animation: slide-right 0.3s 0s ease-in-out;
}
.slide-right-exit-active {
animation: slide-right-exit 0.3s 0s ease-in-out;
}
// 缩小动画
.small-enter-active {
animation: small 0.5s 0s cubic-bezier(0.85, -0.57, 0.58, 1) reverse;
transform-origin: 100% 100%;
}
.small-exit-active {
animation: small 0.5s 0s cubic-bezier(0.85, -0.57, 0.58, 1);
transform-origin: 100% 100%;
}
// 向下移动
.fade-y-enter-active {
animation: fade-in 0.4s ease-out;
}
.fade-y-exit-active {
animation: fade-out 0.4s ease-out;
}
@keyframes slide-up {
from {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-down {
from {
-webkit-transform: translateY(-10%);
-moz-transform: translateY(-10%);
transform: translateY(-10%);
opacity: 0;
}
to {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-left {
from {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
}
to {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slide-left-exit {
from {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
to {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0.5;
}
}
@keyframes slide-right {
from {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
to {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slide-right-exit {
from {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
to {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
opacity: 0.5;
}
}
@keyframes small {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
opacity: 0.5;
}
}
@keyframes fade-in {
from {
opacity: 0;
transform: translate(0, -1rem);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes fade-out {
from {
opacity: 1;
transform: translate(0, 0);
}
to {
opacity: 0;
transform: translate(0, 1rem);
}
}
参考：
Three.js - 通过 CSS3DRenderer 实现全景浏览
three.js中使用CSS3D（CSS3DRenderer）方式展现效果修改展示形状（例子是官网的元素周期表）
Three.js - TrackballControls 轨迹球控件
