551 lines
9.3 KiB
SCSS
551 lines
9.3 KiB
SCSS
/*----------------------
|
|
Animation
|
|
-----------------------*/
|
|
|
|
// Mouse Move/Particle/Abstract Shape Animation
|
|
.edublink-animated-shape {
|
|
position: relative;
|
|
z-index: 9;
|
|
}
|
|
|
|
.shape-group {
|
|
@extend %liststyle;
|
|
li {
|
|
margin: 0;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
@media #{$smlg-device} {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.z-10 {
|
|
z-index: 10;
|
|
}
|
|
|
|
.home-four-course {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../../images/bg/bg-image-3.webp);
|
|
background-size: cover;
|
|
z-index: -1;
|
|
}
|
|
.shape-group {
|
|
.shape-1 {
|
|
top: 59px;
|
|
right: -88px;
|
|
}
|
|
.shape-2 {
|
|
top: -263px;
|
|
right: -406px;
|
|
z-index: -1;
|
|
span {
|
|
display: block;
|
|
height: 570px;
|
|
width: 570px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Header Sticky Animation
|
|
|
|
@keyframes headerSticky {
|
|
0% {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateIt {
|
|
to {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceSlide {
|
|
0%, 20%, 50%, 80%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
transform: translateY(-30px);
|
|
}
|
|
60% {
|
|
transform: translateY(-15px);
|
|
}
|
|
}
|
|
|
|
.bounce-slide {
|
|
animation-duration: 2.5s;
|
|
animation-fill-mode: both;
|
|
animation-iteration-count: infinite;
|
|
animation-name: bounceSlide;
|
|
}
|
|
|
|
@keyframes line1 {
|
|
0% {
|
|
opacity: 1;
|
|
bottom: 0
|
|
}
|
|
30% {
|
|
bottom: 30%
|
|
}
|
|
50% {
|
|
bottom: 50%
|
|
}
|
|
70% {
|
|
bottom: 70%
|
|
}
|
|
100% {
|
|
bottom: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes line2 {
|
|
0% {
|
|
opacity: 1;
|
|
top: 0
|
|
}
|
|
30% {
|
|
bottom: 30%
|
|
}
|
|
|
|
50% {
|
|
bottom: 50%
|
|
}
|
|
|
|
70% {
|
|
bottom: 70%
|
|
}
|
|
|
|
100% {
|
|
top: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes line3 {
|
|
0% {
|
|
opacity: 1;
|
|
top: 500px
|
|
}
|
|
50% {
|
|
top: 50%
|
|
}
|
|
100% {
|
|
top: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes line4 {
|
|
0% {
|
|
opacity: 1;
|
|
top: 300px;
|
|
}
|
|
50% {
|
|
top: 50%
|
|
}
|
|
100% {
|
|
top: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes line5 {
|
|
0% {
|
|
opacity: 1;
|
|
bottom: 400px
|
|
}
|
|
50% {
|
|
bottom: 50%
|
|
}
|
|
100% {
|
|
bottom: 100%;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@keyframes customOne {
|
|
from {
|
|
transform: scale(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.90);
|
|
}
|
|
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes customTwo {
|
|
0% {
|
|
transform: (translate(0.0px, 0.0px));
|
|
}
|
|
|
|
50% {
|
|
transform: (translate(100.0px, 0.0px));
|
|
}
|
|
|
|
100% {
|
|
transform: (translate(50.0px, 50.0px));
|
|
}
|
|
}
|
|
|
|
.customOne {
|
|
animation: customOne 2s infinite;
|
|
}
|
|
.rotateit {
|
|
animation: rotateIt 11s linear infinite;
|
|
}
|
|
|
|
@-webkit-keyframes edublink-vsm-y-move {
|
|
0% {
|
|
-webkit-transform: translate(0, -30%);
|
|
transform: translate(0, -30%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-vsm-y-move {
|
|
0% {
|
|
-webkit-transform: translate(0, -30%);
|
|
transform: translate(0, -30%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-vsm-y-reverse-move {
|
|
0% {
|
|
-webkit-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(0, -30%);
|
|
transform: translate(0, -30%);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-vsm-y-reverse-move {
|
|
0% {
|
|
-webkit-transform: translate(0, 30%);
|
|
transform: translate(0, 30%);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(0, -30%);
|
|
transform: translate(0, -30%);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-sm-x-move {
|
|
0% {
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(50%, 0);
|
|
transform: translate(50%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-sm-x-move {
|
|
0% {
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(50%, 0);
|
|
transform: translate(50%, 0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-sm-x-reverse-move {
|
|
0% {
|
|
-webkit-transform: translate(50%, 0);
|
|
transform: translate(50%, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-sm-x-reverse-move {
|
|
0% {
|
|
-webkit-transform: translate(50%, 0);
|
|
transform: translate(50%, 0);
|
|
}
|
|
100% {
|
|
-webkit-transform: translate(-50%, 0);
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-rotate-y {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(-360deg);
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-rotate-x {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-rotate-x {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-rotate-y {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(-360deg);
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-zoom1 {
|
|
0% {
|
|
-webkit-transform: scale(0.9);
|
|
transform: scale(0.9);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-zoom2 {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes edublink-zoom1 {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1.25);
|
|
transform: scale(1.25);
|
|
}
|
|
}
|
|
|
|
@keyframes edublink-zoom1 {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1.25);
|
|
transform: scale(1.25);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* ------------------------
|
|
Custom Animation 01
|
|
----------------------------*/
|
|
|
|
@keyframes headerSlideDown {
|
|
0% {
|
|
margin-top: -100px
|
|
}
|
|
|
|
to {
|
|
margin-top: 0
|
|
}
|
|
}
|
|
|
|
|
|
/*------------------------
|
|
slidefadeinup
|
|
--------------------------*/
|
|
|
|
@keyframes slideFadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 20%, 0);
|
|
transform: translate3d(0, 20%, 0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.slideFadeInUp {
|
|
-webkit-animation-name: slideFadeInUp;
|
|
animation-name: slideFadeInUp;
|
|
}
|
|
|
|
/* -----------------------------------
|
|
Custom Animation For All Page
|
|
---------------------------------------*/
|
|
|
|
@keyframes moveVertical {
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0)
|
|
}
|
|
}
|
|
|
|
|
|
/*--------------------------------
|
|
Scroll Down Button Animation
|
|
----------------------------------*/
|
|
@keyframes scrollDown {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
10% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(10px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes ripple {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
75% {
|
|
-webkit-transform: scale(1.75);
|
|
transform: scale(1.75);
|
|
opacity: 1; }
|
|
100% {
|
|
-webkit-transform: scale(2);
|
|
transform: scale(2);
|
|
opacity: 0; }
|
|
}
|
|
|
|
@keyframes ripple_2 {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
75% {
|
|
-webkit-transform: scale(3);
|
|
transform: scale(3);
|
|
opacity: 1; }
|
|
100% {
|
|
-webkit-transform: scale(4);
|
|
transform: scale(4);
|
|
opacity: 0; }
|
|
}
|
|
|
|
@keyframes ripple_3 {
|
|
0% {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1); }
|
|
50% {
|
|
-webkit-transform: scale(1.15);
|
|
transform: scale(1.15);
|
|
opacity: 1; }
|
|
100% {
|
|
-webkit-transform: scale(1.3);
|
|
transform: scale(1.3);
|
|
opacity: 0; }
|
|
}
|
|
|
|
|
|
@keyframes radiusChange {
|
|
0% {
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
|
|
40% {
|
|
border-radius: 50px 0px 100px 0px;
|
|
}
|
|
|
|
80% {
|
|
border-radius: 0px 50px 0px 100px;
|
|
}
|
|
|
|
100% {
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
}
|
|
|
|
@keyframes radiusChange2 {
|
|
0% {
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
|
|
25% {
|
|
border-radius: 50px 0px;
|
|
}
|
|
|
|
50% {
|
|
border-radius: 0px 0px 0px 0px;
|
|
}
|
|
|
|
75% {
|
|
border-radius: 0px 50px;
|
|
}
|
|
|
|
100% {
|
|
border-radius: 50px 0px;
|
|
}
|
|
}
|