69 lines
856 B
SCSS
69 lines
856 B
SCSS
@keyframes rotation {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes translatep1{
|
|
0%{
|
|
transform: translateY(35px);
|
|
}
|
|
|
|
100%{
|
|
transform: translateY(5px);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@keyframes translatep2{
|
|
0%{
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
100%{
|
|
transform: translateY(40px);
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
@keyframes translateright{
|
|
0%{
|
|
right: -50px;
|
|
color: transparent;
|
|
display: none;
|
|
}
|
|
|
|
30%{
|
|
right: 150px;
|
|
color: transparent;
|
|
display: block;
|
|
}
|
|
|
|
100%{
|
|
right: 200px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes translateleft{
|
|
0%{
|
|
right: 200px;
|
|
color: white;
|
|
display: block;
|
|
}
|
|
30%{
|
|
right: 150px;
|
|
color: transparent;
|
|
}
|
|
|
|
100%{
|
|
right: -200px;
|
|
color: transparent;
|
|
display: none;
|
|
}
|
|
}
|