Keyframes transform scale does not actualize in chrome

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>