Slide From Left
左からスライドインする入場アニメーション。
HTML
<div class="slide-left"> <div style="font-size:16px;font-weight:700;color:#1a1a1a">Slide In</div> <div style="color:#999;font-size:12px;margin-top:4px">From the left</div> </div>
CSS
.slide-left {
padding: 20px;
background: #f5f5f5;
border-radius: 10px;
animation: from-left .7s cubic-bezier(.16,1,.3,1) forwards;
opacity: 0;
}
@keyframes from-left {
0% { opacity: 0; transform: translateX(-40px); }
100% { opacity: 1; transform: translateX(0); }
}