CSS анимации

CSS правило @keyframes

Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.

CSS

animation: turning 2s ease-out 1s infinite alternate;

Структура @keyframes

@keyframes turning {
    0% {
        border-radius: 0 0 0 0;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 50% 0 0 0;
        transform: rotate(45deg);
    }
    50% {
        border-radius: 50% 50% 0 0;
        transform: rotate(90deg);
    }
    75% {
        border-radius: 50% 50% 50% 0;
        transform: rotate(135deg);
    }
    100% {
        border-radius: 50% 50% 50% 50%;
        transform: rotate(180deg);
    }
}

See the Pen Animation CSS Base Example by Denis (@deniscreative) on CodePen.

Составное свойство «animation» можно разделить на несколько отдельных свойств:

Видео

Link — https://webdesign-master.ru/blog/html-css/2017-08-01-css-animation.html