初学习 HTML 和 CSS，求问 CSS 已经实现鼠标移上去有阴影动画，如何加上鼠标移出也有动画？

[CSGO]

预览地址： http://wangyifang.com/web/xiaofu/2.2/

[InternetExplorer]

不要用动画，用“过渡”就好了。

[rabbbit]

<div></div>
<style>
div {width: 200px;height: 150px;border: 1px solid black;transition: 1s;}
div:hover {box-shadow: 0 0 20px 0px rgba(0,0,0,1)}
</style>

[wxsm]

你这种应该用 transition，而不是 animation

[rabbbit]

[CSGO]

@rabbbit 那如果我要初始值，是不是把初始值放入上面那个样式里就行。比如： box-shadow: 0 0 0 0 rgba(0,0,0,0);

[v2xiaolang]

学了多久到这了

[CSGO]

@v2xiaolang 2 天了

[whitegerry]

css3 动画选择 position、scale、rotation、opacity。

.banner {
position: relative;
flex: 1;
height: 350px;
background: rgba(0, 144, 255, 0.10);
margin: 18px 10px;
box-sizing: border-box;
border-radius: 10px;
}

.banner::after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border-radius: 10px;
box-shadow: 0 8px 55px rgba(0, 0, 0, .12);
opacity: 0;
transition: opacity .3s;
}

.banner:hover::after {
opacity: 1;
}

[chenno9]

你给 banner 写一个相反的动画，
@keyframes banner_animation1 {
from {
box-shadow: 0 8px 55px 0 rgba(0,0,0,0.12);
}
to {
box-shadow: 0 0 0 0 rgba(0,0,0,0.00);
}
}
#banner1,#banner2{
animation: banner_animation1 1s forwards;
}

[rabbbit]

[CSGO]

@rabbbit 嗯，谢谢，已经成功了。

[CSGO]

@chenno9 谢谢