Published in


Animating With Minimal CSS and SVGs

For when JavaScript is just a bit too much for you right now

No Thank You!


.check_label {
transition: font-size 1s ease;
font-size: 1em;
input:checked ~ .check_label {
font-size: 2em;

Adding SVGs

<input id="checkBox" type="checkbox">
<label for="checkBox">
<g id="Label"></g>
<g id="Check" class="appear"></g>
input {
position: absolute;
opacity: 0;
cursor: pointer;
label .appear {
opacity: 0;
transition: opacity .5s ease;
input:checked ~ label .appear {
animation: opacity .5s ease;
opacity: 1;
Much prettier!


@keyframes rotate-tire {
0% {transform: rotate(0deg)}
100% {transform: rotate(359deg)}
.tire {
animation: rotate-tire .25s linear infinite;
transform-origin: 50% 50%;



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store