patak1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS animacije - ponavljanje 1</title>
    <style>
/*  .krug {
        width: 100px;
        height: 100px;
        background: teal;
        border-radius:100%;
        animation-timing-function:linear;
        animation: otkucaji 1s infinite;
        animation-direction: initial;
    }
*/

/*  @keyframes otkucaji {
        0% {
            transform: translate(10px,10px) scale(1);
        }
        50% {
            transform: translate(10px,10px) scale(1.5);
        }
        100% {
            transform: translate(10px,10px) scale(1);
        }
    }
*/

    body {
    overflow: hidden;
    }
    .kocka {
        width: 100px;
        height: 100px;
        animation: jurnjava 4s infinite;
        transform: translate(-300px,-400px);
    }
    @keyframes jurnjava {
        0% {
            transform: translate(-300px,-400px);
        }
        25% {
            transform: translate(500px,500px);
        }
        50% {
            transform: translate(1800px,500px);
        }
        75% {
            transform: translate(500px,500px);
        }
        100% {
            transform: translate(-300px,-400px) scale(3.0);
        }
    }
    </style>
</head>

<body>
    <div class="krug"></div>
    <div class="kocka"><img src="preuzmi.png"></img></div>
</body>
</html>