悬停时/移出时的不同过渡效果

换句话说，就是“在mouseenter和mouseleave事件上使用不同的过渡效果”，因为这些是发生的DOM事件，但我们这里不使用JavaScript，我们讨论的是CSS的:hover状态和CSS3过渡。鼠标悬停时，某个CSS属性会动画到一个新的值；鼠标移开时，另一个CSS属性会进行动画。

这是一个简单的技巧。你可以在**两个**状态下设置过渡效果，如下所示

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

当您将鼠标悬停在上面时，:hover状态下的过渡效果会覆盖常规状态下设置的过渡效果，并且该属性会进行动画。当您将鼠标移开时，常规状态下的过渡效果会生效，并且该属性会进行动画。

现在，这里有一些你永远不应该使用的非常糟糕的例子

查看演示