2.来点颜色看看指定一个变色过渡其实和褪色过渡的过程异曲同工。
首先，创建一个div元素，并为它添加一个名为color的类。
<div class='box color'>
<p>COLOR HERE</p>
</div>同样地，我们也要借助:hover选择器来帮我们完成这件事，但是这一次我们不是改变透明度而是背景色：
.color:hover {
background: #FF5722;
}如下就是实际效果了：
3.一起摇摆接下来，来实现一个摆动的效果。
这个效果实现起来比前面的两个例子稍显复杂。在这个例子中，我会采用@keyframes来完成。@keyframes——赋予你在一个CSS动画序列中控制中间步骤的魔力。首先还是一样，你肯定已经听烦了，创建一个div元素，并未它添加一个名为wiggle的类：
<div class='box wiggle'>
<p>WIGGLE WIGGLE</p>
</div>接下来，我们要做的就是借助@keyframes来创建动画。我们先给动画起个名字，就叫wiggle吧。并在如下的代码中添加抖动效果的实现：
@keyframes wiggle {
20% { transform: translateX(4px); }
40% { transform: translateX(-4px); }
60% { transform: translateX(2px); }
80% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}从上面的代码已经可以看出，@keyframes赋予我们将动画分解成单步，并且精确定义每一步发生了什么的能力。通过百分比的方式指定动画的进度：20%——div相对于初始位置右移4px。40%——div相对于初始位置左移4px。60%——div相对于初始位置右移2px。80%——div相对于初始位置左移1px。100%——div恢复到初始位置。现在我们就能借助:hover选择器来展示wiggle的动画了：
.wiggle:hover {
animation: wiggle 1s ease;
animation-iteration-count: 1;
}我们将animation设置成wiggle。同时希望动画持续1秒的时长，采用ease的动画效果。最后，就是指定动画在每次鼠标指针悬停的时候触发一次。下图就是最终的动画效果：
总结
