Breathing Circle
呼吸するようにスケールするサークル。瞑想アプリ風。
HTML
<div class="breathe"></div>
CSS
.breathe {
width: 48px;
height: 48px;
border-radius: 50%;
background: #1a1a1a;
animation: breathe-anim 3s ease-in-out infinite;
}
@keyframes breathe-anim {
0%, 100% { transform: scale(.85); opacity: .5; }
50% { transform: scale(1.15); opacity: 1; }
}