minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

Initial commit

Browse Source
This commit is contained in:
r2xrzh9q2z-lab
2026-02-02 11:00:08 +07:00
commit d53d4417b2
116 changed files with 79533 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

915
public/assets/scss/_animation.scss Normal file
View File

@@ -0,0 +1,915 @@
//>>>>> 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;
}
}