See the Pen 외부선 애니메이션 by nilgi (@nilgi) on CodePen.
▶ HTML
<style type="text/css"> // css 시작 알림
.outbox { // 클래스 outbox
width: 150px; // 가로 크기 150
height: 100px; // 세로 크기 100
outline: 2px solid #333; // 외곽선 굵기2 실선 먹색
margin: 30px; // 바깥여백 30
}
</style> // css 마침
<h2>외부선 애니메이션</h2>
<div class="outbox"></div>
▶ CSS
.outbox { // 클래스 outbox
animation: ob 4s infinite; // 애니메이션 이름은 ob고 애니메이션 총길이 4초며 반복
}
@keyframes ob { // 애니메이션 ob에 키프레임 추가
50% { // 4초중 50% 지점에서
outline: 24px solid tomato; // 외곽선 굵기24 실선 토마토 색으로 변형
}
}
▶ 비교