利用css的animation属性实现:
@keyframes banner_overlayGrey {
0% {
width: 100%;
}
100% {
width: 0%;
}
}
/* 元素样式 */
.banner_overlayGrey {
animation: banner_overlayGrey 2000ms linear both; /* 注意:both意味着动画完成后,动画里修改的属性仍然生效 */
z-index: 1012;
position: absolute;
bottom: 0;
right: 0;
background-color: #353535;
overflow: hidden;
width: 100vw;
height: 100vh;
opacity: 1;
}
PS: animation: banner_overlayGrey 2000ms 2000ms linear both; 还可以设定延迟执行时长,就能实现多个动画按顺序执行!!!第一个时间是执行时长,第二个时间是延迟时长,也可以配合使用transition让动画更加流畅