CSS анимация / переход Поворот логотипа (шаги)

Question

Я начинаю про CSS Animation / Transition.

Прошу помощи.Я хочу получить этот эффект:

Изображение логотипа, которое:

1. будет поворачиваться на 180 градусов за 1 секунду
2. будет вращаться еще на 180 градусов за 2секунд
3. он будет неподвижен в течение следующих 3 секунд
4. , при каждом наведении курсора он будет размытым

Answer 1

Вы должны сказать, что вы пробовали, и привести пример, в любом случае, это то, что я придумал (в css):

@keyframes rotation {
    0%   { transform: rotate(0deg);}
    16%  {transform: rotate(180deg);} 
    50%  {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

.foo {
    filter: blur(0px);
    animation-name: rotation;
    animation-duration: 6s;
}
.foo:hover {
    filter blur(3px);
}