Jump and Slide

index.html

<div class="container">
	<div class="📦"></div>
	<div class="📦"></div>
	<div class="📦"></div>
	<div class="📦"></div>
	<div class="📦"></div>
</div>

jump-and-slide.markdown

Jump and Slide

Original animation by Vitaly Silkin: https://dribbble.com/shots/4268258-Evitare-loader

Also inspired by the @keyframers! https://www.twitch.tv/keyframers

A Pen by Steve Gardner on CodePen.

License.

scripts

<script src="//codepen.io/steveg3003/pen/zBVakw"></script>

style.scss

:root
{
	--duration: 1.5s;
	--container-size: 250px;
	--box-size: 33px;
	--box-border-radius: 15%;
}

html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.container
{
	width: var(--container-size);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.📦
{
	width: var(--box-size);
	height: var(--box-size);
	position: relative;
	display: block;
	transform-origin: -50% center;
	border-radius: var(--box-border-radius);
	
	&:after
	{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		background-color: lightblue;
		border-radius: var(--box-border-radius);
		box-shadow: 0px 0px 10px 0px rgba(#1C9FFF, 0.4);
	}
	
	&:nth-child(1)
	{
		animation: slide var(--duration) ease-in-out infinite alternate;
		&:after{ animation: color-change var(--duration) ease-in-out infinite alternate; }
	}
	
	@for $i from 1 to 5 
	{
		&:nth-child(#{$i + 1})
		{	
			animation: flip-#{$i} var(--duration) ease-in-out infinite alternate;
			&:after{ animation: squidge-#{$i} var(--duration) ease-in-out infinite alternate; }
		}
	}
	
	&:nth-child(2):after{ background-color: #1C9FFF; }
	&:nth-child(3):after{ background-color: #1FB1FD; }	
	&:nth-child(4):after{ background-color: #22C7FB; }
	&:nth-child(5):after{ background-color: #23D3FB; }
}

@keyframes slide
{
	0% { background-color: #1795FF; transform: translatex(0vw); }
	100% { background-color: #23D3FB; transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25))); }
}

@keyframes color-change
{
	0% { background-color: #1795FF; }
	100% { background-color: #23D3FB; }
}

@for $i from 1 to 5 
{	
    @keyframes flip-#{$i} {
      0%, #{$i * 15}% { transform: rotate(0); }  
      #{$i * 15 + 20}%, 100% { transform: rotate(-180deg); }
    }
	
	@keyframes squidge-#{$i}
	{
		#{$i * 15 - 10}% { transform-origin: center bottom; transform: scalex(1) scaley(1);}
		#{$i * 15}% { transform-origin: center bottom; transform: scalex(1.3) scaley(0.7);}
		#{$i * 15 + 10}%, #{$i * 15 + 5}% { transform-origin: center bottom; transform: scalex(0.8) scaley(1.4);}
		#{$i * 15 + 40}%, 100% { transform-origin: center top; transform: scalex(1) scaley(1);}
		#{$i * 15 + 25}% { transform-origin: center top; transform: scalex(1.3) scaley(0.7);}
	}
}