외곽선 그리는 애니메이션

안녕하세요.

오늘은 CSS3 transition 으로 외곽선을 그리는 다양한 애니메이션 효과를 구현해 볼 예정입니다.

CSS3 transition 속성은 CSS 속성을 변경할 때 애니메이션 속도를 조절할 수 있습니다.

먼저 outline이라는 클래스를 갖는 div를 하나 만듭니다.

<div class="outline">
</div>

그안에 빈 span 태그 4개를 넣어줍니다.

    <div class="outline">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

각각의 span 태그 하나 하나가 상 하 좌 우 외곽선이 됩니다.

div 에 width 랑 height를 부여하고 margin auto를 줘서 가운데 정렬해웁니다.

 .outline{position: relative; width: 150px; height: 150px; margin: 50px auto; border: 1px solid #ccc;}

그 안에 span 태그들은 position absolute 속성을 줘서 부모 div를 기준으로 따라가게 만들고

각각의 span 태그들을 순서대로 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래에 배치하고

순서대로 첫번째와 세번째는 width를 0 height를 5px, 두번째와 네번째는 width: 5px, height를 0으로 둡니다.

.outline span{position: absolute; background: darkblue;}
.outline span:nth-child(1) {left: 0; top: 0; width: 0; height: 5px;}
.outline span:nth-child(2) {right: 0; top: 0; width: 5px; height: 0;}
.outline span:nth-child(3) {right: 0; bottom: 0; width: 0; height: 5px;}
.outline span:nth-child(4) {left: 0; bottom: 0; width: 5px; height: 0;}

여기서 첫번 째 span에다가 transition width를 주고

두번째 span에는 transition height를 주는 동시에 첫번째 span이 동작하는 시간만큼 transition-delay를 추가해줍니다.

.outline span:nth-child(1) {left: 0; top: 0; width: 0; height: 5px; transition: width 0.1s;}
.outline span:nth-child(2) {right: 0; top: 0; width: 5px; height: 0; transition: height 0.1s linear 0.1s;}

이렇게 추가해주고

세번째 span에는 transition width를 주는 동시에 transition-delay를 앞에 두개의 span들이 끝나는 시간만큼 추가해줍니다.

네번째도 마찬가지로 적용하면

.outline span:nth-child(1) {left: 0; top: 0; width: 0; height: 5px; transition: width 0.1s;}
.outline span:nth-child(2) {right: 0; top: 0; width: 5px; height: 0; transition: height 0.1s linear 0.1s;}
.outline span:nth-child(3) {right: 0; bottom: 0; width: 0; height: 5px; transition: width 0.1s linear 0.2s;}
.outline span:nth-child(4) {left: 0; bottom: 0; width: 5px; height: 0; transition: height 0.1s linear 0.3s;}

이렇게 완성이 되고

이제 마우스를 hover 했을 경우에 각각의 width, height를 100%로 주게 되면 끝납니다.

.outline:hover span:nth-child(1) {width: 100%;}
.outline:hover span:nth-child(2) {height: 100%;}
.outline:hover span:nth-child(3) {width: 100%;}
.outline:hover span:nth-child(4) {height: 100%;}

이렇게 작성하게 되면

마우스를 hover 했을 경우 왼쪽에서부터 시계방향으로 색깔이 칠해지는 효과를 구현할 수 있습니다.

최종 코드

See the Pen eaKMyB by juyeol (@juyeol) on CodePen.

딜레이 없이 했을 경우

See the Pen 외곽선 그리는 효과 2 by juyeol (@juyeol) on CodePen.

감사합니다.

퍼블리셔 블로그

외곽선 그리는 애니메이션

티스토리툴바