Alkimisti/anim012.html

## anim012.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes levizja1 {
            from {
                left: 0;

            }
            to {
                left: 300px;
                background-color: #4ea7f9;
            }
        }

        #container {
            width: 622px;
            border-left: 2px solid black;
            border-right: 2px solid black;
        }

        #div1, #div2 {
            padding: 10px;
            width: 300px;
            height: 20px;
            margin-bottom: 10px;
            font-weight: bold;
            position: relative;
            animation: levizja1 3s;
            left: 0;
            border: 1px solid black;
        }

        #div1 {
            animation-fill-mode: forwards;
            background-color: yellow;
        }

        #div2 {
            animation-fill-mode: backwards;
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="div1">animation-fill-mode: forwards</div>
    <div id="div2">animation-fill-mode: backwards</div>
</div>


</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	@keyframes levizja1 {
	from {
	left: 0;

	}
	to {
	left: 300px;
	background-color: #4ea7f9;
	}
	}

	#container {
	width: 622px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	}

	#div1, #div2 {
	padding: 10px;
	width: 300px;
	height: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	position: relative;
	animation: levizja1 3s;
	left: 0;
	border: 1px solid black;
	}

	#div1 {
	animation-fill-mode: forwards;
	background-color: yellow;
	}

	#div2 {
	animation-fill-mode: backwards;
	background-color: orange;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="div1">animation-fill-mode: forwards</div>
	<div id="div2">animation-fill-mode: backwards</div>
	</div>


	</body>
	</html>