Wash Hands

index.pug

h1 Wash your hands
p
	a(href="https://www.who.int/gpsc/clean_hands_protection/") WHO: Clean protect against infection

.hands.hands--full-screen
	.hand.hand--right
	.hand.hand--left

script.js

// css only animation

style.scss

$hand_color: #eee;
$hand_behind_color: darken($hand_color, 20%);
$hand_radius: 0.5rem;
$hand_z_index: 10;

@keyframes wash {
	from {
		top: -0.5rem;
		left: 0.25rem;
	}
	to {
		top: 0.5rem;
	}
}

@keyframes bubble {
	from {
		bottom: 0;
		opacity: 1;
	}
	to {
		bottom: 4.25rem;
		opacity: 0;
	}
}

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500&display=swap');

html, body {
	box-sizing: border-box;
	height: 100vh;
}

body {
	-webkit-font-smoothing: antialiased;
	background-color: #007;
	background: linear-gradient(to bottom, #007 0%, #003 100%);
	color: #eee;
	font-family: 'Baloo 2', cursive;
	padding: 1rem;
}

h1, p {
	text-align: center;
}

h1 {
	margin: 2rem 0 0.5rem;
}

p {
	margin: 0.5rem 0;
}

a {
	color: #aaa;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

.hands {
	position: relative;
	display: inline-block;
	width: 4.5rem;
	height: 4rem;
	&--full-screen {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: $hand_z_index;
	}
}

.hand {
	position: absolute;
	display: inline-block;
	background-color: $hand_color;
	left: 0;
	width: 2.25rem;
	height: 4rem;
	border-radius: $hand_radius;
	transform: rotateZ(40deg);
	animation: wash 1s ease-in-out 0s infinite alternate;
	&::before, &::after {
		position: absolute;
		display: inline-block;
		content: '';
		background-color: $hand_color;
	}
	&::before {
		transform-origin: bottom;
		width: 1rem;
		height: 2.75rem;
		bottom: 0.25rem;
		right: 0.25rem;
		border-radius: $hand_radius;
		transform: rotateZ(55deg);
	}
	&::after {
		width: 1.5rem;
		height: 1.5rem;
		bottom: 0;
		border-radius: 50%;
		animation: bubble 2s ease-out 0s infinite;
	}
	&--right {
		left: 1.5rem;
		transform: rotateZ(-40deg);
		background-color: $hand_behind_color;
		animation-delay: 0.25s;
		&::before {
			background-color: $hand_behind_color;
		}
	}
}

wash-hands.markdown

Wash Hands

This pen shows an infinite animation for washing hands against infection. You might use it as a loading indicator in times of the coronavirus disease 2019.

It's made with HTML and CSS only.

A Pen by Tamio Honma on CodePen.

License.