kamilszuflav2

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .fej  {
                height: 75px;
                width: 75px;
                position: absolute;
                top: 140px;
                left: 608.5px;
                animation-name:no1;
                animation-duration: 6s;
                animation-iteration-count: infinite;
            }
            .lej {
                height: 300px;
                width: 300px;
                position: absolute;
                top: 140px;
                left: 500px;
                animation-name: no2;
                animation-duration: 6s;
                animation-iteration-count: infinite;
            }

            body {
                animation-name: no3;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }
            div {

            }

                }
                @keyframes no1 {
                    0%{background-color: green;}
                    25%{ background-color: red;}
                    50%{background-color: green; }
                    75%{background-color: red; }
                    100%{background-color: green;}
                }
                @keyframes no2 {
                    0%{transform: translate(0px,600px) rotate(180deg)}
                    25%{}
                    50%{}
                    75%{}
                    100%{}
                }
                @keyframes no3 {
                    0%{transform: translate(200px,630px) rotate(190deg)}
                    25%{}
                    50%{}
                    75%{}
                    100%{}
                }


        </style>
    </head>
<body>
    <div>WESOLYCH SWIAT</div>
    <img class="lej" src="pp.png">
    <img class="fej" src="ppp.png">


</body>
</html>