Jaybe
58 lines
1.4 KiB
SCSS
58 lines
1.4 KiB
SCSS
// animation 효과
|
|
@keyframes moreBtn {//main 더보기 버튼
|
|
0% {background-position-x:40%;}
|
|
40% {background-position-x:70%;}
|
|
60% {background-position-x:right;}
|
|
80% {background-position-x:70%;}
|
|
100% {background-position-x:right;}
|
|
}
|
|
|
|
@keyframes moreBtn_mo {//main 더보기 버튼
|
|
0% {bottom:0;}
|
|
100% {bottom:-100%;}
|
|
}
|
|
|
|
|
|
@keyframes letterSpacing { //팝업 modal title
|
|
0% {letter-spacing:0.5rem;}
|
|
100% {letter-spacing: 0px;}
|
|
}
|
|
|
|
@keyframes hover-line { //pagenation.scss
|
|
from {width: 0%;}
|
|
to {width: 100%;}
|
|
}
|
|
|
|
|
|
@keyframes sidebarShake { //navbar icon hover
|
|
0% {transform: rotate(-10deg);}
|
|
100% {transform: rotate(20deg);}
|
|
}
|
|
|
|
@keyframes updown { //navbar icon active
|
|
0% {transform: translateY(0px);}
|
|
100% {transform: translateY(10px);}
|
|
}
|
|
|
|
@keyframes rotate-turn { //dt-buttons hover
|
|
0% {transform: rotateX(0deg);}
|
|
100% {transform: rotateX(45deg);}
|
|
}
|
|
|
|
@keyframes shadow { //dt-buttons hover
|
|
0% {box-shadow: inset 3px 0px 7px rgb(var(--bs-red-origin));}
|
|
100% {box-shadow: inset 200px 0px 7px rgb(var(--bs-red-origin));}
|
|
}
|
|
|
|
@mixin effect($second:0.3s) {
|
|
transform: translateY(6.25rem); visibility:hidden; transition: all linear $second;
|
|
&.up{transform: translateY(0); visibility:visible;}
|
|
}
|
|
|
|
@keyframes zenith-loading-reveal {
|
|
80%{letter-spacing: 8px;}
|
|
100% {background-size: 300% 300%;}
|
|
}
|
|
@keyframes zenith-loading-glow {
|
|
40% {text-shadow: 0 0 8px rgb(var(--bs-red-origin));}
|
|
} |