CODEWITHSUNDEEP
htmlcss
gunslinger1994
gunslinger1994

Reputation: 43

Keyframes transform scale does not actualize in chrome

VScode picture

Hi. Thanks for helping! I am new to both css and html, currently I'm following a youtube tutorial where we are presented with a box which we want to scale using keyframes to define the scale and applying it on the object as can be seen in the picture. I've tried copying what the author of the tutorial wrote, but nothing's happening with my box inside chrome. I've also tried applying webkit, which I understand (maybe falsely) is used to help the browser interpret the code. Anyway, I would appreciate if someone can explain to me what I am doing incorrectly. Thanks again!

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1 class="heading">animacija</h1>
    <p>
        <button class="button">Yo?</button>
    </p>
    <div id="kocka"></div>

</body>
</html>

Upvotes: 1

Views: 92

Answers (1)

pso
pso

Reputation: 523

The 1 and infinite in animation: transform 4s ease-in-out 1 infinite alternate; are both referring to the animation-iteration-count (see: https://developer.mozilla.org/en-US/docs/Web/CSS/animation)

If you remove either it works.

Upvotes: 2

Related Questions