Is it possible to repeat the "Animation-delay" property in each animation interaction?

Asked

Viewed 106 times

1

The estate animation-delay only happens once in the first interaction of the animation, but after that it is no longer applied in the element.

In the example below by hovering the mouse on #container the animation is applied to #square, but with a delay of 1s:

Example:

<html>
<head>
    <title>Document</title>
    <style>
        #container {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            padding: 5px;
        }

        #container:hover #square {
            animation: anima 2s linear infinite 1s;
        }

        #square {
            width: 100px;
            height: 100px;
            background: #808080;
            position: relative;
        }

        @keyframes anima {
            0% {
                left: 0;
            }

            100% {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="square"></div>
    </div>
</body>
</html>

After that 1s the animation is started and when it is finished, it is executed again, but in that return the animation-delay doesn’t work anymore. I’d like each animation interaction to property animation-delay work and not just in the first interaction.

NOTE: in which case I’d like to just use CSS.

html css

1 answer

1


The delay is applied only when the animation starts, and not in the animation cycle itself. So when the animation starts has the delay, but after she enters loop nay!

The displacement of time, the when the animation is applied to the element, where the animation must begin.

inserir a descrição da imagem aqui

But there is a way to solve this, only with CSS and mathematics of course :D. So if your animation has 2s and you want a delay of 1s, you actually have to put the animation with 3s (2s of animation and 1s of stopping time)

So in your @keyframes you put the animation to start in 33,33%, which corresponds to 1s of 3s that you have, ready now she always stays 1s stop before repeating the cycle.

Code of the image above:

<html>
<head>
    <title>Document</title>
    <style>
        #container {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            padding: 5px;
        }

        #container:hover #square {
            animation: anima 3s linear infinite;
        }

        #square {
            width: 100px;
            height: 100px;
            background: #808080;
            position: relative;
        }

        @keyframes anima {
            33.33% {
                left: 0;
            }

            100% {
                left: 400px;
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="square"></div>
    </div>
</body>
</html>

  • 1

    Thanks! @hugocsl great answer, helped me a lot, you’re the guy :)

  • 1

    @John the Baptist it’s good that you got the idea there, []

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.