Анимация. @keyframes

Захотелось мне поиграть с анимацией. Сегодня пробовала использовать @keyframes. Заинтересовало меня в этом правиле то, что можно прописать достаточно интересную анимацию, а потом назначать ее разным элементам с разным временем и эффектами.

Каждое состояние в анимации называется ключевым кадром и мы можем указать в какой момент какое свойство элемента следует изменить. Время указываем в процентах, принимая за 100% полную продолжительность цикла (без учета эффектов перехода)

Например, анимация моргания смайла в улыбке возможна такая:

@keyframes eye {
   85% { transform: scaleY(0.1); }
   90% { transform: none; }   
 }

85% цикла мы применяем свойство transform: scaleY(0.1); — сужаем глаза. Дальше за 5% распахиваем — убираем трансформацию и 10% ничего не трогаем — глаза открыты
Оставлю здесь код моего улыбчивого смайла. Я не художник) Возможно стоит научить его улыбаться на hover? Идея взята на сайте WebReference

@keyframes eye {
  85% { transform: scaleY(0.1); }
  90% { transform: none; }     
}

@keyframes mouth {
  
  0% { transform: none; }
  5% { transform: scaleY(0.3); }
}

.smile{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: yellow;
  border: 2px solid black;    
  margin: 10px auto;
  position: relative;
}
.eye{
   content: '';
   display: block;
   width: 15px;
   height: 30px;
   border-radius: 50%;
   background: #000;
   position: absolute;
   top: 30px;
   animation: eye 3s ease-in-out infinite;
}
.eye-left{
  left: 30px;
  
}

.eye-right{
  right: 30px;
}

.mouth{
  display: block;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  border-bottom: 3px solid red;
  position: absolute;
  bottom: 20px;
  left: 35px;
  animation: mouth 3s ease-in-out infinite;
}

</style>

<div class="smile">
    <span class="eye eye-left"></span>
    <span class="eye eye-right"></span>
    <span class="mouth"></span>
</div>

Для запуска всей этой красоты используется свойство animation, его не рекомендуют использовать вместо transition без необходимости, но поиграть-то можно 😉 Правило вроде бы простое: прямой переход из пункта А в пункт Б — transition, с посещением пунктов В, Г и Д — это уже animation.

После смайла я захотела порисовать кольцо загрузки. Первый вариант просто крутит с остановками, а второй пытается изобразить затухание колебания при наведении. Опять же не художник. Физику не считала.

@keyframes loading {
0% { transform: none;}
100% { transform: rotate(360deg); }
}
...
animation: loading 3s ease-in-out infinite;

@keyframes loading-2 {
0% { transform: none; }
2% { transform: rotate(360deg); }
6% { transform: none; }
14% { transform: rotate(300deg); }
30% { transform: none; }
62% { transform: rotate(200deg); }
}
...
animation: loading-2 10s linear infinite;

Все делала на JSFiddle и скопировала на codepen в поисках удобного варианта поделиться