html test

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>HELL NO</title>
    <meta content="Opis w Google" name="description">
    <meta content="słowa, kluczowe, wypisane, po, porzecinku" name="keywords">
    <link href="theme.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="trol"></p>

</body>
</html>

@keyframes mymove {
    0%   {top: 0px;}
    24%  {top: 0px;}
    25%  {top: 200px;}
    49%  {top: 200px;}
    50%  {top: 400px; }
    100% {top: 400px;}

    0%   {left: -201px; }
    25%  {left: 100%;}
    50%  {left: -201px;}
    100% {left: 100%;}

    0%    {background-image: url("trollface.jpg");}
    24%   {background-image: url("trollface.jpg");}
    25%   {background-image: url("troll2.png");}
    49%   {background-image: url("troll2.png");}
    50%   {background-image: url("troll3.png");}
    100%  {background-image: url("troll3.png");}
}

/* The element to apply the animation to */
div.troll {
    background-color: red;
    display: block;
    position: absolute;
    height: 200px;
    width: 200px;

    animation-name: mymove;
    animation-duration: 20s;
    animation-iteration-count: infinite;

}