CSS动画/过渡旋转标志（步骤）答案

【问题标题】：CSS Animation / Transition Rotate Logo (Steps)CSS动画/过渡旋转标志（步骤）
【发布时间】：2018-10-25 06:33:29
【问题描述】：

我开始介绍 CSS 动画/过渡。

我寻求帮助。我想获得这个效果：

图像标志：

它将在 1 秒内旋转 180 度
它将在 2 秒内再旋转 180 度
接下来的 3 秒内将一动不动
每次鼠标悬停都会变成模糊的形状

【问题讨论】：

你试过什么？你的代码呢？
您好，我们不是来为您编写整个代码的。给我们一些示例代码。我们为您提供帮助会容易得多。
有些页面可以让您完成工作。topcoder.com...,
为什么人们会为此给出答案，这对我来说是漂亮的代码。

标签： css css-transitions animate.css

【解决方案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);
}

【讨论】：