在网页设计中，CSS动画能够提升用户体验，使页面更加生动有趣。CSS3拥有丰富的动画属性，其中hover动画是其中一个常用的效果。

.selector:hover{
animation: 动画名称 动画时长 动画缓动函数;
}

上述代码中，.selector为要添加hover效果的元素，:hover表示当鼠标指针位于其上方时的状态。animation属性指定要应用的动画及其属性，包含动画名称（由@keyframes定义）、动画时长和动画缓动函数。

以一个例子说明。在以下代码中，我们定义了一个离开按钮的旋转动画，鼠标悬停在按钮上时动画停止：

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.rotate {
animation-name: rotateOut;
animation-duration: 2s;
}
.rotate:hover {
animation-play-state: paused;
}
@keyframes rotateOut {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

当鼠标悬停在按钮上时，动画状态变为paused，即停止旋转。当从按钮上移开鼠标时，动画继续播放。

通过CSS3 animation hover，可以在网页设计中添加简单但有趣的动画效果，提高用户体验。通过定义不同的动画，可以使悬停的元素实现更多炫酷的效果。