configurator · June 7, 2017 17:12
diff --git a/balls..html b/balls..html
 <html>
    <head>
        <title>Balls.</title>
        <meta name="viewport" content="width=device-width" />
        <style>
            html, body {
                width: 100vw;
                height: 100vh;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            board {
                width: 800px;
                height: 600px;
                margin: auto;
                border: 1px solid black;
                position: relative;
            }
            @media screen and (max-width: 810px) {
                board {
                    width: calc(100vw - 10px);
                }
            }
            @media screen and (max-height: 610px) {
                board {
                    height: calc(100vh - 10px);
                }
            }

            ball {
                position: absolute;
                top: 0;
                bottom: 0;
                animation: horizonal 1.2s infinite alternate linear;
                animation-delay: -0.6s;
            }

            ball:nth-child(2) {
                top: 30%;
                animation-duration: 2s;
                animation-delay: -2.2s;
            }

            ball::after {
                content: ' ';
                position: absolute;
                animation: vertical 1.72s infinite alternate cubic-bezier(0, 0, 0.2, 1);

                width: 50px;
                height: 50px;
                background: black;
                border-radius: 50px;
            }

            ball:nth-child(2)::after {
                animation-delay: -3s;
            }

            @keyframes horizonal {
                0% {
                    left: 0;
                }
                100% {
                    left: calc(100% - 50px);
                }
            }

            @keyframes vertical {
                0% {
                    top: calc(100% - 50px);
                }
                100% {
                    top: 0;
                }
            }
        </style>
    </head>
    <body>
        <board>
            <ball></ball>
            <ball></ball>
        </board>
    </body>
 </html>
	<html>
	<head>
	<title>Balls.</title>
	<meta name="viewport" content="width=device-width" />
	<style>
	html, body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	board {
	width: 800px;
	height: 600px;
	margin: auto;
	border: 1px solid black;
	position: relative;
	}
	@media screen and (max-width: 810px) {
	board {
	width: calc(100vw - 10px);
	}
	}
	@media screen and (max-height: 610px) {
	board {
	height: calc(100vh - 10px);
	}
	}

	ball {
	position: absolute;
	top: 0;
	bottom: 0;
	animation: horizonal 1.2s infinite alternate linear;
	animation-delay: -0.6s;
	}

	ball:nth-child(2) {
	top: 30%;
	animation-duration: 2s;
	animation-delay: -2.2s;
	}

	ball::after {
	content: ' ';
	position: absolute;
	animation: vertical 1.72s infinite alternate cubic-bezier(0, 0, 0.2, 1);

	width: 50px;
	height: 50px;
	background: black;
	border-radius: 50px;
	}

	ball:nth-child(2)::after {
	animation-delay: -3s;
	}

	@keyframes horizonal {
	0% {
	left: 0;
	}
	100% {
	left: calc(100% - 50px);
	}
	}

	@keyframes vertical {
	0% {
	top: calc(100% - 50px);
	}
	100% {
	top: 0;
	}
	}
	</style>
	</head>
	<body>
	<board>
	<ball></ball>
	<ball></ball>
	</board>
	</body>
	</html>