Transition & Animation

Transition | css 속성 값의 전환이 일어날 때 

Transition의 속성값

transition은 우리가 요소의 모습을 변형할 때 이 변화의 속도와 방법을 조절해서 애니메이션을 더 부드럽게 만들어주는 속성이다. 다음의 네 가지를 속성 값으로 가질 수 있다. 

1. property | 변화가 일어날 css 속성 
   • 각각의 속성에 transition을 따로 지정하고 싶을 때에는 다음과 같이 코드를 작성
   • .like-button { transition: background-color 200ms ease-in 100ms, font-size 200ms ease-in-out; }
2. duration | 변화의 지속 시간, 200~250ms를 가장 많이 사용
   • ms, s
3. [timing-function] | 변화의 속도, 생략 가능 
   • ease-in, ease-out, ease-in-out, cubic-bezier()
   • cubic-bezier()는 변화 속도 함수를 custom할 수 있게 해 줌 | timing-function을 눈으로 보면서 확인할 수 있는 사이트
4. [delay] | 변화의 지연 속도, 생략 가능

 

Transition과 Pesudo Element

trasition example

 

button이 hover되었을 때 , 위와 같이 라인의 width가 0에서 100%로 바뀌는 기능은 border-bottom이 아니라 가상 요소를 만들어서 구현해야 한다. border-bottom의 width를 조절할 수 없기 때문이다. 

 

button::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: blue;
  transition: width 250ms ease-in;
}

button:hover::after {
  width: 100%;
}

 

Animation | 전환과 관계없이 사용 가능

animation은 transition보다 더 많은 속성을 적용할 수 있다. 따라서 animation 속성에서 속기형으로 한꺼번에 처리하기 보다는 아래와 같이 하나 하나씩 속성 별로 값을 정의해서 사용하는 것이 편리할 수도 있다.

 

• animation-name | @keyframes에서 정의한 애니메이션을 이용해서, 요소에 애니메이션을 적용할 수 있다.
  • animation은 transition과 달리 속성이 전환되는 것이 아니라, 단순히 동작만 하는 것이기 때문에, 아래 코드에서처럼 box에 따로 배경색을 지정하지 않은 경우, 배경색이 1초동안 blue => red로 바뀐 뒤에 다시 기본값(투명)으로 돌아온다. 

@keyframes box-moving {
  from {
    top: 0;
    background-color: blue;
  }
  to {
    top: 100px;
    background-color: red;
  }
}

@keyframes box-moving-2 {
  0% {
    top: 0;
    background-color: blue;
    opacity: 1; 
  }
  
  80% {
    top: 100px;
    background-color: red;
    opacity: 0;
  }
  
  100% {
    top: 100px;
    background-color: red;
    opacity: 0; 
  }
}

.box {
  width: 100px;
  height: 100px;
  position: relative;
  animation-name: box-moving;
  animation-duration: 1000ms; 
  /* background-color: blue; */
}

 

• animation-duration, animation-delay
  • ms, s
• animation-timing-function 
• animation-iteration-count | 애니메이션 반복 횟수
  • 정수 또는 infinite을 값으로 갖는다
• animation-direction |  애니메이션의 진행 방향
  • 기본적으로 @keyframes의 from => to 방향으로 애니메이션이 진행된다.
  • reverse | to => from
  • alternate | 방향을 번갈아 가면서 진행, iteration-count가 1보다 클 때 유용하게 사용할 수 있다.  

display none이 transition 안먹는 이유