67 lines
1.1 KiB
SCSS
67 lines
1.1 KiB
SCSS
h1 {
|
|
.word-animation {
|
|
overflow: hidden;
|
|
|
|
span {
|
|
color: #4ec7f3;
|
|
display: block;
|
|
text-transform: capitalize;
|
|
animation: rotateSpin 10s infinite;
|
|
|
|
&.red {
|
|
color: red;
|
|
}
|
|
|
|
&.orange {
|
|
color: orange;
|
|
}
|
|
|
|
&.blue {
|
|
color: blue;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes rotateSpin {
|
|
10% {
|
|
-webkit-transform-style: translateY(-102%);
|
|
transform: translateY(-102%);
|
|
}
|
|
|
|
25% {
|
|
-webkit-transform-style: translateY(-100%);
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
35% {
|
|
-webkit-transform-style: translateY(-202%);
|
|
transform: translateY(-202%);
|
|
}
|
|
|
|
50% {
|
|
-webkit-transform-style: translateY(-200%);
|
|
transform: translateY(-200%);
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform-style: translateY(-302%);
|
|
transform: translateY(-302%);
|
|
}
|
|
|
|
75% {
|
|
-webkit-transform-style: translateY(-300%);
|
|
transform: translateY(-300%);
|
|
}
|
|
|
|
85% {
|
|
-webkit-transform-style: translateY(-402%);
|
|
transform: translateY(-402%);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform-style: translateY(-400%);
|
|
transform: translateY(-400%);
|
|
}
|
|
}
|