:root {
    --duration: 1s;
}

.animation.inline
{
    display:inline-block;
}

.animation
{
    position:relative;
    display:inline-block;

    width:7ch;
    font-size:10px;
}
.animation .frame
{
    position:absolute;
    inset: 0;

    width:100%;
    height:100%;
    object-fit: contain;

    white-space:nowrap;
}

.icon.animation
{
    width:64px;
    height:64px;
}

.animation .frame.f1 {
    opacity: 1.0;
    animation: frame-1 var(--duration) linear infinite;
}
@keyframes frame-1 {
    0%, 17% {
        opacity: 1.0;
    }

    18%, 33% {
        opacity: 0.0;
    }

    34%, 50% {
        opacity: 0.0;
    }

    51%, 66% {
        opacity: 0.0;
    }

    67%, 84% {
        opacity: 0.0;
    }

    85%, 100% {
        opacity: 0.0;
    }
}

/* LLM generated below */
.animation .frame.f2 {
    opacity: 0.0;
    animation: frame-2 var(--duration) linear infinite;
}
.animation .frame.f3 {
    opacity: 0.0;
    animation: frame-3 var(--duration) linear infinite;
}
.animation .frame.f4 {
    opacity: 0.0;
    animation: frame-4 var(--duration) linear infinite;
}
.animation .frame.f5 {
    opacity: 0.0;
    animation: frame-5 var(--duration) linear infinite;
}
.animation .frame.f6 {
    opacity: 0.0;
    animation: frame-6 var(--duration) linear infinite;
}

@keyframes frame-2 {
    0%, 17% {
        opacity: 0.0;
    }

    18%, 33% {
        opacity: 1.0;
    }

    34%, 50% {
        opacity: 0.0;
    }

    51%, 66% {
        opacity: 0.0;
    }

    67%, 84% {
        opacity: 0.0;
    }

    85%, 100% {
        opacity: 0.0;
    }
}

@keyframes frame-3 {
    0%, 17% {
        opacity: 0.0;
    }

    18%, 33% {
        opacity: 0.0;
    }

    34%, 50% {
        opacity: 1.0;
    }

    51%, 66% {
        opacity: 0.0;
    }

    67%, 84% {
        opacity: 0.0;
    }

    85%, 100% {
        opacity: 0.0;
    }
}

@keyframes frame-4 {
    0%, 17% {
        opacity: 0.0;
    }

    18%, 33% {
        opacity: 0.0;
    }

    34%, 50% {
        opacity: 0.0;
    }

    51%, 66% {
        opacity: 1.0;
    }

    67%, 84% {
        opacity: 0.0;
    }

    85%, 100% {
        opacity: 0.0;
    }
}

@keyframes frame-5 {
    0%, 17% {
        opacity: 0.0;
    }

    18%, 33% {
        opacity: 0.0;
    }

    34%, 50% {
        opacity: 0.0;
    }

    51%, 66% {
        opacity: 0.0;
    }

    67%, 84% {
        opacity: 1.0;
    }

    85%, 100% {
        opacity: 0.0;
    }
}

@keyframes frame-6 {
    0%, 17% {
        opacity: 0.0;
    }

    18%, 33% {
        opacity: 0.0;
    }

    34%, 50% {
        opacity: 0.0;
    }

    51%, 66% {
        opacity: 0.0;
    }

    67%, 84% {
        opacity: 0.0;
    }

    85%, 100% {
        opacity: 1.0;
    }
}