[CSS] border 두께 transition 적용하기

 

간단한 애니메이션들은 css의 transition을 사용하게 되는데

 

border에 애니메이션을 넣을 경우 예상처럼 되지 않는다.

 

    input {
      display: block;
      width: 100%;
      padding: 1em;
      margin-top: 1em;
      border-bottom: 1px solid #ddd;
      transition: all ease 0.5s;
    }
    input:focus {
      border-bottom: 2px solid #3844bd;
    }

위처럼 같이 transition을 사용하여 border-bottom: 1px solid #ddd 에서

border-bottom: 2px solid #3844bd 로 변경 할 경우

자연스럽게 border가 2px로 되면서 색상이 변경되는 것을 예상하였지만

 

컬러는 자연스럽게 변경이 되나 두께가 뚝 끊겨서 변경된다.

 

 

border의 두께를 조정할 땐 box-shadow를 사용해서 처리할 수 있다.

    input {
      display: block;
      width: 100%;
      padding: 1em;
      margin-top: 1em;
      border-bottom: 1px solid #ddd;
      transition: all ease 0.5s;
    }
    input:focus {
      border-bottom: 1px solid #3844bd;
      box-shadow: 0 1px 0 #3844bd;
    }

 

 

이 밖에 다른 식으로 border animation을 적용할 수 있다.

 

 

https://codepen.io/SoufianeLasri/pen/WNGgmqe

[PROTO] - Framed div on hover (CSS only)

https://www.sliderrevolution.com/resources/css-border-animation/

Awesome CSS Border Animation Examples to Use in Your Websites