Clip Path Reveal
clip-pathで切り取りながら現れるリビール。
HTML
<div class="cp-reveal"> <div style="font-size:20px;font-weight:700;color:#1a1a1a">Revealed</div> <div style="color:#999;font-size:12px;margin-top:4px">Clip-path animation</div> </div>
CSS
.cp-reveal {
padding: 32px;
background: #f5f5f5;
border-radius: 12px;
text-align: center;
animation: cp-in .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes cp-in {
0% { clip-path: inset(0 100% 0 0); opacity: 0; }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}