forked from UKSOURCE/hailearning.edu.vn
916 lines
15 KiB
SCSS
916 lines
15 KiB
SCSS
|
|
//>>>>> Video Animation Start <<<<<//
|
|
@-webkit-keyframes rippleOne {
|
|
70% {
|
|
-webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
|
|
box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
|
|
}
|
|
100% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
|
|
box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes rippleOne {
|
|
70% {
|
|
-webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
|
|
box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
|
|
}
|
|
100% {
|
|
-webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
|
|
box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
|
|
}
|
|
}
|
|
//>>>>> Video Animation End <<<<<//
|
|
|
|
|
|
|
|
//>>>>> Circle Animation Start <<<<<//
|
|
@keyframes cir36 {
|
|
100%{
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rounded {
|
|
50%{
|
|
transform: rotate(15deg);
|
|
}
|
|
}
|
|
|
|
//>>>>> Circle Animation End <<<<<//
|
|
|
|
@keyframes up-down {
|
|
0% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
|
|
//>>>>> Preloader Animation Start <<<<<//
|
|
@-webkit-keyframes spinner {
|
|
to {
|
|
-webkit-transform: rotateZ(360deg);
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spinner {
|
|
to {
|
|
-webkit-transform: rotateZ(360deg);
|
|
transform: rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes letters-loading {
|
|
0%,
|
|
75%,
|
|
100% {
|
|
opacity: 0;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
25%,
|
|
50% {
|
|
opacity: 1;
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes letters-loading {
|
|
0%,
|
|
75%,
|
|
100% {
|
|
opacity: 0;
|
|
transform: rotateY(-90deg);
|
|
}
|
|
25%,
|
|
50% {
|
|
opacity: 1;
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
//>>>>> Preloader Animation Start <<<<<//
|
|
@keyframes loaderspin {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes tpswing{
|
|
0% {
|
|
-webkit-transform: rotate(20deg);
|
|
-ms-transform:rotate(20deg);
|
|
transform: rotate(20deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(0deg);
|
|
-ms-transform:rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes width {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes width {
|
|
0% {
|
|
width: 0%;
|
|
}
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes loaderspin {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes loaderpulse {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
//>>>>> Preloader Animation End <<<<<//
|
|
|
|
//animation
|
|
@keyframes rounded {
|
|
50%{
|
|
transform: rotate(20deg);
|
|
}
|
|
}
|
|
|
|
@keyframes cir36 {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.float-bob-y {
|
|
-webkit-animation-name: float-bob-y;
|
|
animation-name: float-bob-y;
|
|
-webkit-animation-duration: 3s;
|
|
animation-duration: 3s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@-webkit-keyframes float-bob-y {
|
|
0% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
50% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
}
|
|
|
|
@keyframes float-bob-y {
|
|
0% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
50% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
}
|
|
|
|
.float-bob-x {
|
|
-webkit-animation-name: float-bob-x;
|
|
animation-name: float-bob-x;
|
|
-webkit-animation-duration: 3s;
|
|
animation-duration: 3s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@-webkit-keyframes float-bob-x {
|
|
0% {
|
|
-webkit-transform: translateX(-0px);
|
|
transform: translateX(30px);
|
|
}
|
|
50% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(30px);
|
|
transform: translateX(30px);
|
|
}
|
|
}
|
|
|
|
@keyframes float-bob-x {
|
|
0% {
|
|
-webkit-transform: translateX(30px);
|
|
transform: translateX(30px);
|
|
}
|
|
50% {
|
|
-webkit-transform: translateX(10px);
|
|
transform: translateX(10px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(30px);
|
|
transform: translateX(30px);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce-x {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
-webkit-transform: translateX(30px);
|
|
transform: translateX(30px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.bounce-x {
|
|
-webkit-animation: bounce-x 7s infinite linear;
|
|
animation: bounce-x 7s infinite linear;
|
|
}
|
|
|
|
@keyframes criss-cross-left {
|
|
0% {
|
|
left: -20px;
|
|
}
|
|
50% {
|
|
left: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
100% {
|
|
left: 50%;
|
|
width: 375px;
|
|
height: 375px;
|
|
}
|
|
}
|
|
@keyframes criss-cross-right {
|
|
0% {
|
|
right: -20px;
|
|
}
|
|
50% {
|
|
right: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
100% {
|
|
right: 50%;
|
|
width: 375px;
|
|
height: 375px;
|
|
}
|
|
}
|
|
|
|
@keyframes rotated2 {
|
|
0% {
|
|
transform: rotate(0);
|
|
}
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes wave {
|
|
0% {transform: translateX(0);}
|
|
50% {transform: translateX(-25%);}
|
|
100% {transform: translateX(-50%);}
|
|
}
|
|
|
|
@keyframes zoom {
|
|
0%{
|
|
transform:scale(.5);
|
|
}
|
|
50%{
|
|
transform: scale(1);
|
|
}
|
|
100%{
|
|
transform: scale( .5);
|
|
}
|
|
}
|
|
|
|
@keyframes translateY2 {
|
|
0% {
|
|
-webkit-transform: translateY(-30px);
|
|
-moz-transform: translateY(-30px);
|
|
-ms-transform: translateY(-30px);
|
|
-o-transform: translateY(-30px);
|
|
transform: translateY(-30px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translateY(20px);
|
|
-moz-transform: translateY(20px);
|
|
-ms-transform: translateY(20px);
|
|
-o-transform: translateY(20px);
|
|
transform: translateY(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes translateX2{
|
|
0% {
|
|
-webkit-transform: translateX(-30px);
|
|
-moz-transform: translateX(-30px);
|
|
-ms-transform: translateX(-30px);
|
|
-o-transform: translateX(-30px);
|
|
transform: translateX(-30px);
|
|
}
|
|
100% {
|
|
-webkit-transform: translatXY(20px);
|
|
-moz-transform: translateX(20px);
|
|
-ms-transform: translateX(20px);
|
|
-o-transform: translateX(20px);
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
@keyframes moving {
|
|
0% {
|
|
|
|
transform: translatey(0px);
|
|
}
|
|
20%{
|
|
transform: translateX(-50px);
|
|
}
|
|
50% {
|
|
transform: translatey(-40px);
|
|
}
|
|
|
|
100% {
|
|
transform: translatey(0px);
|
|
}
|
|
}
|
|
|
|
|
|
/*img-animation**********************/
|
|
.img-custom-anim-right {
|
|
animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes img-anim-right {
|
|
0% {
|
|
transform: translateX(5%);
|
|
clip-path: inset(0 0 0 100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.img-custom-anim-left {
|
|
animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes img-anim-left {
|
|
0% {
|
|
transform: translateX(-5%);
|
|
clip-path: inset(0 100% 0 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.img-custom-anim-top {
|
|
animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes img-anim-top {
|
|
0% {
|
|
transform: translateY(-5%);
|
|
clip-path: inset(0 0 100% 0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes shine {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
.animation-infinite {
|
|
animation: ShapeAnim 80s linear infinite;
|
|
height: 30px;
|
|
width: 100%;
|
|
background-repeat: repeat;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
.img-custom-anim-bottom {
|
|
animation: img-anim-bottom 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes img-anim-bottom {
|
|
0% {
|
|
transform: translateY(5%);
|
|
clip-path: inset(100% 0 0 0);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes sparkle {
|
|
0% { opacity: 0; transform: scale(0.5); }
|
|
50% { opacity: 1; transform: scale(1.5); }
|
|
100% { opacity: 0; transform: scale(0.5); }
|
|
}
|
|
|
|
|
|
@keyframes borderAnim {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
100% {
|
|
width: 44px;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
@keyframes shine {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes strokeColorChange1 {
|
|
0% {
|
|
-webkit-text-stroke-color: rgba(202, 210, 210, 0.10);
|
|
}
|
|
25% {
|
|
-webkit-text-stroke-color: rgba(202, 210, 210, 0.10);
|
|
}
|
|
50% {
|
|
-webkit-text-stroke-color: rgba(194, 223, 147, 0.10);
|
|
}
|
|
75% {
|
|
-webkit-text-stroke-color: rgba(227, 87, 43, 0.10);
|
|
}
|
|
100% {
|
|
-webkit-text-stroke-color: rgba(194, 223, 147, 0.10);
|
|
}
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% {
|
|
-webkit-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
}
|
|
|
|
10%, 30%, 50%, 70%, 90% {
|
|
-webkit-transform: translateX(-5px);
|
|
-ms-transform: translateX(-5px);
|
|
transform: translateX(-5px);
|
|
}
|
|
|
|
20%, 40%, 60%, 80% {
|
|
-webkit-transform: translateX(5px);
|
|
-ms-transform: translateX(5px);
|
|
transform: translateX(5px);
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes rotateBorder {
|
|
0% {
|
|
transform: translate(-50%, -50%) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: translate(-50%, -50%) rotate(360deg);
|
|
}
|
|
}
|
|
|
|
// This is for Progress bar animation also has a js code
|
|
@keyframes animate-positive {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
@keyframes scrolly {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
100% {
|
|
transform: translateY(-60%);
|
|
}
|
|
}
|
|
|
|
@keyframes scrolls {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes scroll-left-to-right-loop {
|
|
0% {
|
|
transform: translateX(-50%);
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
|
|
@-webkit-keyframes zoomOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.3, .3, .3);
|
|
transform: scale3d(.3, .3, .3);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.zoomOut {
|
|
-webkit-animation-name: zoomOut;
|
|
animation-name: zoomOut;
|
|
}
|
|
|
|
.img_left_animation {
|
|
animation: left-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
|
|
opacity: 0
|
|
}
|
|
@keyframes left-animation {
|
|
0% {
|
|
clip-path: inset(0 100% 0 0);
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
.img_right_animation {
|
|
animation: right-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
|
|
opacity: 0
|
|
}
|
|
@keyframes right-animation {
|
|
0% {
|
|
clip-path: inset(0 0 0 100%);
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
.img_top_animation {
|
|
animation: top-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
|
|
opacity: 0
|
|
}
|
|
@keyframes top-animation {
|
|
0% {
|
|
clip-path: inset(0 0 100% 0);
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
.img_bottom_animation {
|
|
animation: bottom-animation 2000ms forwards cubic-bezier(0.40, 0.98, 0.52, 0.99);
|
|
opacity: 0
|
|
}
|
|
@keyframes bottom-animation {
|
|
0% {
|
|
clip-path: inset(100% 0 0 0);
|
|
opacity: 0
|
|
}
|
|
100% {
|
|
clip-path: inset(0 0 0 0);
|
|
opacity: 1
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes circle {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0.6;
|
|
}
|
|
100% {
|
|
transform: scale(30);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes icon-bounce {
|
|
0%, 100%, 20%, 50%, 80% {
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
-webkit-transform: translateY(-10px);
|
|
transform: translateY(-10px);
|
|
}
|
|
60% {
|
|
-webkit-transform: translateY(-5px);
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInLeft {
|
|
0% {
|
|
-webkit-transform: translate3d(-100%, 0, 0);
|
|
transform: translate3d(-100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInLeft {
|
|
-webkit-animation-name: slideInLeft;
|
|
animation-name: slideInLeft;
|
|
}
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
-webkit-transform: translate3d(100%, 0, 0);
|
|
transform: translate3d(100%, 0, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInRight {
|
|
-webkit-animation-name: slideInRight;
|
|
animation-name: slideInRight;
|
|
}
|
|
|
|
@-webkit-keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
0% {
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInUp {
|
|
-webkit-animation-name: slideInUp;
|
|
animation-name: slideInUp;
|
|
}
|
|
|
|
@-webkit-keyframes slideInDown {
|
|
0% {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
0% {
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
visibility: visible;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.slideInDown {
|
|
-webkit-animation-name: slideInDown;
|
|
animation-name: slideInDown;
|
|
}
|
|
|
|
.zoom_in {
|
|
transform: scale(0.5);
|
|
|
|
}
|
|
|
|
.fade_up,
|
|
.fade_down,
|
|
.zoom_in,
|
|
.zoom_out {
|
|
opacity: 0;
|
|
transition: all 2s;
|
|
}
|
|
|
|
.show {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.8, .8, .8);
|
|
transform: scale3d(.8, .8, .8);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|