Another expand square approach

TODO: https://stackoverflow.com/questions/20383393/css-transition-doesnt-work-with-top-bottom-left-right https://animista.net/play/basic/slide/slide-br

by katalin_2003

HTML

<div class="container">
	<div class="square-1-1 color-square">
		<div class="cover-square square-1-2"></div>
	</div>

	<div class="square-2-1 color-square">
		<div class="cover-square square-2-2"></div>
	</div>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	background: #303030;
	padding: 1em 1em 5em 1em;
	margin: 0em;
	width: 100vw;
	height: 100vh;
	font-family: sans-serif;
}

.container {
	position: relative;
	border: 1px solid red;
	width: 100%;
	height: 100%;
	max-width: 800px;
	margin: 0 auto;

/* can't animate squares without an initial value for top, right, bottom, left */
/* Need to initially center them using values for those, so flex is out of the question */
/*
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
*/
}

.color-square {
	width: 100px;
	height: 100px;
}

.cover-square {
	position: relative;
	width: 64px;	/* 64px */
	height: 64px;	/* 64px */
	background-color: #303030;
}

.square-1-1 {
	position: absolute;
	top: calc(50% - (100px/2));
	left: calc(50% - (100px/2));
	background-color: #74b94e;
	/* animation: slide-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; */
	animation: slide-tl 2s infinite both;	
	transition: right 2s ease-out, bottom 2s ease-out;
}

.square-1-2 {
	top: 36px;
	left: 36px;
}

.square-2-1 {
 	position: absolute;
	bottom: calc(50% - (100px/2));
	right: calc(50% - (100px/2));
	/* background-color: #fff042; */
	background-color: #d9dc3c;
	/* animation: slide-br 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both; */
	animation: slide-br 2s infinite both;
	transition: top 2s ease-out, left 2s ease-out;
}

@keyframes slide-tl {
	to {
		top: 0em;
		left: 0em;
	}
}

@keyframes slide-br {
	to {
		right: 0em;
		bottom: 0em;
	}
}