82 lines
1.5 KiB
SCSS
82 lines
1.5 KiB
SCSS
@mixin inFromRight($start) {
|
|
@keyframes inFromRight#{$start} {
|
|
0% {
|
|
transform: translateX(#{$start + '%'});
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin inFromLeft($start) {
|
|
@keyframes inFromLeft#{$start} {
|
|
0% {
|
|
transform: translateX(#{'-' + $start + '%'});
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin outToLeft($end) {
|
|
@keyframes outToLeft#{$end} {
|
|
0% {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(#{'-' + $end + '%'});
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin outToRight($end) {
|
|
@keyframes outToRight#{$end} {
|
|
0% {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateX(#{$end + '%'});
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin shake-horizontally {
|
|
animation: shake-horizontally 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
backface-visibility: hidden;
|
|
perspective: 1000px;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
@keyframes shake-horizontally {
|
|
10%,
|
|
90% {
|
|
transform: translate3d(-1px, 0, 0);
|
|
}
|
|
|
|
20%,
|
|
80% {
|
|
transform: translate3d(2px, 0, 0);
|
|
}
|
|
|
|
30%,
|
|
50%,
|
|
70% {
|
|
transform: translate3d(-4px, 0, 0);
|
|
}
|
|
|
|
40%,
|
|
60% {
|
|
transform: translate3d(4px, 0, 0);
|
|
}
|
|
}
|