외곽선 애니메이션

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 실선 토마토 색으로 변형
    }
}

 

▶ 비교

[웹코딩 배우기/· CSS] - 굵어지고 색이 변하는 border