123 lines
2.6 KiB
CSS
123 lines
2.6 KiB
CSS
.svg {
|
|
width: 60%;
|
|
transform: translateY(10%);
|
|
}
|
|
|
|
#headDot1, #headDot2 {
|
|
animation: headblinker 5000ms infinite;
|
|
}
|
|
@keyframes headblinker {
|
|
0% { opacity: 0; }
|
|
10% { opacity: 1; }
|
|
20% { opacity: 0; }
|
|
30% { opacity: 1; }
|
|
40% { opacity: 0; }
|
|
50% { opacity: 1; }
|
|
60% { opacity: 0; }
|
|
70% { opacity: 1; }
|
|
75% { opacity: 0; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
#bodyDot1 {
|
|
animation: blinker1st 1s ease-in-out infinite;
|
|
}
|
|
@keyframes blinker1st {
|
|
10% { opacity: 0; }
|
|
20% { opacity: 1; }
|
|
60% { opacity: 1; }
|
|
70% { opacity: 0; }
|
|
80% { opacity: 1; }
|
|
90% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
#bodyDot2 {
|
|
animation: blinker2nd 1s ease-in-out infinite;
|
|
}
|
|
@keyframes blinker2nd {
|
|
10% { opacity: 1; }
|
|
20% { opacity: 0; }
|
|
30% { opacity: 1; }
|
|
60% { opacity: 1; }
|
|
70% { opacity: 0; }
|
|
80% { opacity: 1; }
|
|
90% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
#bodyDot3 {
|
|
animation: blinker3rd 1s ease-in-out infinite;
|
|
}
|
|
@keyframes blinker3rd {
|
|
20% { opacity: 1; }
|
|
30% { opacity: 0; }
|
|
40% { opacity: 1; }
|
|
60% { opacity: 1; }
|
|
70% { opacity: 0; }
|
|
80% { opacity: 1; }
|
|
90% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
#bodyDot4 {
|
|
animation: blinker4th 1s ease-in-out infinite;
|
|
}
|
|
@keyframes blinker4th {
|
|
30% { opacity: 1; }
|
|
40% { opacity: 0; }
|
|
50% { opacity: 1; }
|
|
60% { opacity: 1; }
|
|
70% { opacity: 0; }
|
|
80% { opacity: 1; }
|
|
90% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
#head,
|
|
.ear,
|
|
.eye {
|
|
animation-name: wiggle;
|
|
animation-duration: 5000ms;
|
|
animation-iteration-count: infinite;
|
|
transform-origin: unset;
|
|
}
|
|
@keyframes wiggle {
|
|
75% {transform: rotate(0deg);}
|
|
80% {transform: rotate(5deg);}
|
|
85% {transform: rotate(-5deg);}
|
|
90% {transform: rotate(10deg);}
|
|
95% {transform: rotate(-3deg);}
|
|
100% {transform: rotate(0deg);}
|
|
}
|
|
|
|
#lineTop {
|
|
stroke-dasharray: 38;
|
|
stroke-dashoffset: 0;
|
|
animation: lineAnimation 1s ease-in-out infinite alternate;
|
|
}
|
|
#lineMiddle {
|
|
stroke-dasharray: 38;
|
|
stroke-dashoffset: 0;
|
|
animation: lineAnimation 1s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite alternate;
|
|
}
|
|
#lineBottom {
|
|
stroke-dasharray: 38;
|
|
stroke-dashoffset: 0;
|
|
animation: lineAnimation 1s cubic-bezier(0.5, 0.2, .3, 0.9) infinite alternate;
|
|
}
|
|
@keyframes lineAnimation {
|
|
0% { stroke-dashoffset: 0; }
|
|
100% { stroke-dashoffset: 38; }
|
|
}
|
|
|
|
#processLine {
|
|
stroke-dasharray: 82;
|
|
stroke-dashoffset: -82;
|
|
animation: processAnimation 4s linear infinite;
|
|
}
|
|
@keyframes processAnimation {
|
|
0% { stroke-dashoffset: -82; }
|
|
100% { stroke-dashoffset: -246; }
|
|
}
|