Alkimisti/anim011.html

## anim011.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 levizja {
            from {
                left: 0;
            }
            to {
                left: 300px;
            }
        }

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

        #div1, #div2, #div3, #div4, #div5, #div6 {
            padding: 10px;
            width: 300px;
            height: 20px;
            margin-bottom: 10px;
            font-weight: bold;
            position: relative;
            animation: levizja 5s;
            left: 300px;
            border: 1px solid black;
        }

        #div1 {
            animation-timing-function: linear;
            background-color: lightyellow;
        }

        #div2 {
            animation-timing-function: ease;
            background-color: yellow;
        }

        #div3 {
            animation-timing-function: ease-in;
            background-color: orange;
        }

        #div4 {
            animation-timing-function: ease-out;
            background-color: darkorange;
        }

        #div5 {
            animation-timing-function: ease-in-out;
            background-color: red;
        }

        #div6 {
            animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
            background-color: indianred;
        }

    </style>
</head>
<body>
<div id="container">
    <div id="div1">animation-timing-function: linear</div>
    <div id="div2">animation-timing-function: ease</div>
    <div id="div3">animation-timing-function: ease-in</div>
    <div id="div4">animation-timing-function: ease-out</div>
    <div id="div5">animation-timing-function: ease-in-out</div>
    <div id="div6">animation-timing-function: cubic-bezier</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 levizja {
	from {
	left: 0;
	}
	to {
	left: 300px;
	}
	}

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

	#div1, #div2, #div3, #div4, #div5, #div6 {
	padding: 10px;
	width: 300px;
	height: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	position: relative;
	animation: levizja 5s;
	left: 300px;
	border: 1px solid black;
	}

	#div1 {
	animation-timing-function: linear;
	background-color: lightyellow;
	}

	#div2 {
	animation-timing-function: ease;
	background-color: yellow;
	}

	#div3 {
	animation-timing-function: ease-in;
	background-color: orange;
	}

	#div4 {
	animation-timing-function: ease-out;
	background-color: darkorange;
	}

	#div5 {
	animation-timing-function: ease-in-out;
	background-color: red;
	}

	#div6 {
	animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
	background-color: indianred;
	}

	</style>
	</head>
	<body>
	<div id="container">
	<div id="div1">animation-timing-function: linear</div>
	<div id="div2">animation-timing-function: ease</div>
	<div id="div3">animation-timing-function: ease-in</div>
	<div id="div4">animation-timing-function: ease-out</div>
	<div id="div5">animation-timing-function: ease-in-out</div>
	<div id="div6">animation-timing-function: cubic-bezier</div>
	</div>
	</body>
	</html>