CSS动画/过渡旋转徽标（步骤）

Question

我开始讨论CSS动画/过渡。

我请求帮助。我想获得这种效果：

Image Logo：

1. 它将在1秒内旋转180度
2. 它将在2秒内再旋转180度
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);
}