<div class="box">
Hello World
</div>
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.box {
animation: fade-out 1000ms;
/*
기본값을 0으로 지정해서 애니메이션이 끝났을때
opacity: 0이 설정되게 합니다.
*/
opacity: 0;
}
.box {
width: 100px;
height: 100px;
background: slateblue;
padding: 8px;
display: grid;
place-content: center;
color: white;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.