css border animation

 

처음에는 아주 가볍게 '오른쪽으로 border 그대로 빛나면서 그려지는 animation 하나 있으면 좋겠다' 라고 생각했다.

아주 쉽지 않았고 border animation 에 관한 자료도 많이 찾아봤지만 많이 없었다.

4개의 래퍼런스를 찾아보았는데 비슷한 패턴들이 보여서 정리해보았다.

 

1. Border는 Border가 아니다.

Border에 Gradient를 넣거나 Animation을 넣는 경우는 전부 border를 사용하지 않는다.

그게 무슨 말이냐면 좀 더 큰 Box를 뒤에 만들어서 가리는 형태이다.

첫 이미지를 보면 이쁘게 Gradient까지 적용한 Border로 보이지만 사실은 좀 더 큰 Gradient Box이다.

이 Box 이미지를 :before, :after에 적용을 시키고 animation까지 적용하면 화려한 Border가 탄생하게 된다.

 

2. 그럼에도 Border같이 만들려면 clip-path

css의 clip-path 속성은 클리핑 범위를 지정해서 범위 바깥 부분은 숨기는 방식이다.

예를 들어 clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%) 이런식으로 주게 된다면?

Border에 해당하는 부분(?)만 남게된다.

 

- 그래서

일단은 위 코드들을 잘 섞어서 결과물을 만들어냈고

무엇보다 이런 코드들을 공개해주신 분들께 너무 감사했다. 뭔가 나만의 tip 같은 느낌이었을텐데 말이다.

(border-animation: #333 to-the-right 2s #fff shining 이런게 있었으면 편했겠지)

 

- 레퍼런스

Gradient Border - https://codepen.io/alphardex/pen/vYEYGzp

Gradient Border

CSS Border Animation - https://codepen.io/Huhtamaki/pen/GPzwPY

CSS Border Animation

Rotating border - https://codepen.io/Chester/pen/QPoyjN

Rotating border

Animated gradient border around resizable content - https://codepen.io/johnnyfekete/pen/WMoWvb

Animated gradient border around resizable content