0

I'd like to be able to hover over this animation and have it transition to another color. I am having trouble adding this transition to the variable. Standard css transition is just to add a :hover to the class colors but I seem to be missing something here when working with the variable. Any suggestions out there?

<div class="cloader">   
    <div class="loader">
        <span class="colors" style="--i:0;"></span>
        <span class="colors" style="--i:1;"></span>
        <span class="colors" style="--i:2;"></span>
        <span class="colors" style="--i:3;"></span>
        <span class="colors" style="--i:4;"></span>
        <span class="colors" style="--i:5;"></span>
        <span class="colors" style="--i:6;"></span>
        <span class="colors" style="--i:7;"></span>
        <span class="colors" style="--i:8;"></span>
        <span class="colors" style="--i:9;"></span>
    </div>
</div>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #F5F5DC;
    overflow: hidden;
}

.loader {
    position: relative;
    width: 250px;
    height: 250px;
}
.colors {
    position: absolute;
    top: calc(12px * var(--i));
    left: calc(12px * var(--i));
    right: calc(12px * var(--i));
    bottom: calc(12px * var(--i));
    border: 10px solid #dbf;
    border-radius: 50%;
    animation: animate 4s alternate ease-in-out infinite;
    filter: hue-rotate(calc(8deg * var(--i)));
    animation-delay: calc(-0.1s* var(--i));
}


@keyframes animate {
    0%
    {
        transform: scale(0.7) translateX(-10%);
    }

    50%{
        transform: scale(1.3) translateX(10%);
    }

    100%
    {
        transform: scale(1.5) translateX(-10%);
    }
}

1 Answer 1

1

You have to change the border-color only

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #F5F5DC;
    overflow: hidden;
}

.loader {
    position: relative;
    width: 250px;
    height: 250px;
}
.colors {
    position: absolute;
    top: calc(12px * var(--i));
    left: calc(12px * var(--i));
    right: calc(12px * var(--i));
    bottom: calc(12px * var(--i));
    border: 10px solid #dbf;
    border-radius: 50%;
    animation: animate 4s alternate ease-in-out infinite;
    filter: hue-rotate(calc(8deg * var(--i)));
    animation-delay: calc(-0.1s* var(--i));
    z-index: -1;
    transition: border 3s ease-out;
}

.loader:hover .colors {
    border-color: red;
}

@keyframes animate {
    0%
    {
        transform: scale(0.7) translateX(-10%);
    }

    50%{
        transform: scale(1.3) translateX(10%);
    }

    100%
    {
        transform: scale(1.5) translateX(-10%);
    }
}
<div class="cloader">   
    <div class="loader">
        <span class="colors" style="--i:0;"></span>
        <span class="colors" style="--i:1;"></span>
        <span class="colors" style="--i:2;"></span>
        <span class="colors" style="--i:3;"></span>
        <span class="colors" style="--i:4;"></span>
        <span class="colors" style="--i:5;"></span>
        <span class="colors" style="--i:6;"></span>
        <span class="colors" style="--i:7;"></span>
        <span class="colors" style="--i:8;"></span>
        <span class="colors" style="--i:9;"></span>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.