CODEWITHSUNDEEP
htmlcsscss-animations
AC3
AC3

Reputation: 355

CSS animation not timed correctly

I'm displaying a word that goes to each corner of the screen within 5 seconds. The problem I have is that the animation doesn't seem to stay as long as it should in each corner.

JSFIDDLE

#lorem {
    font-family: 'Open Sans';
    font-size: 50px;
    color: red;
    position: absolute;
    top: 3%; left: 3%;
    animation: switch 5s linear infinite 0s;
}

@keyframes switch {
    25% { left:auto; right:3%; }
    50% { top:auto; bottom:3%; }
    75% { right:auto; left:3%; }
    100% { bottom:auto; top:3%; }
}
<span id="lorem">Lorem</span>

Upvotes: 1

Views: 49

Answers (1)

Bram Vanroy
Bram Vanroy

Reputation: 28564

Provide all values instead of only the once you think you change. You aren't overwriting previous values, you are transitioning from one to the other.

http://jsfiddle.net/6qjrn0zv/2/

#lorem {
    font-size: 50px;
    color: red;
    position: absolute;
    top: 3%;
    left: 3%;
    animation: switch 4s linear infinite forwards;
}
@keyframes switch {
    0% {
        top: 3%;
        right: auto;
        bottom: auto;
        left: 3%;
    }
    25% {
        top: 3%;
        right: 3%;
        bottom: auto;
        left: auto;
    }
    50% {
        top: auto;
        right: 3%;
        bottom: 3%;
        left: auto;
    }
    75% {
        top: auto;
        right: auto;
        bottom: 3%;
        left: 3%;
    }
}

Upvotes: 2

Related Questions