Собственный контекст позиционирования при анимациях

Нужно раскомментировать анимацию

by SerGen

HTML

<div class="spinner spinner--easy"></div>
<div class="spinner spinner--hard"></div>

CSS

.spinner {
    display: block;
    
    /*animation: spinner 3s linear infinite;*/
}
.spinner + .spinner {
    margin-top: 2em;
}
.spinner--easy {
    height: 4em;
    width: 4em;
    
    border: 2px solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    
    transform: rotate(45deg);
}
.spinner--hard {
    height: 4em;
    width: 2em;
    margin-left: 2em;
    overflow: hidden;
    
    transform-origin:  0 50%;
}
.spinner--hard:after {
    content: '';
    
    position: absolute;
    top: 0;
    left: -100%;
    right: 0;
    bottom: 0;
    
    border: 2px solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-radius: 50%;
    
    transform: rotate(45deg);
}

@keyframes spinner {
	from {transform: rotate(0);}
	to {transform: rotate(1turn);}
}