CSS Animation

transition

transition은 전환 / css 들의 속성들의 값이 변경되었을 때 그 전환을 애니메이션 효과를 적용하여 일정 시간에 걸쳐서 다양한 방법으로 진행 되도록 하는 것

transition 브라우저 지원

transition 속성

transition-property - 원하는 애니메이션 스킬 속성을 입력한다. ( color, background-color, position 등 )
transition-duration - 애니메이션 효과가 몇초동안 실행될지, 시작해서 끝날때까지 시간을 밀리초(ms), 초(s)단위로 설정한다.
transition-timingfunction - 애니메이션이 적용되는 속도를 지정한다.
linear : 등속
ease : 기본값. 느리게 시작했다가 빨라졌다가 다시 느려짐
ease-in : 점점 빨라진다.
ease-in-out : 처음과 끝이 느림
ease-out : 점점 느려짐
cubic-bezier() 함수를 쓰면 속도를 커스텀마이징할수있다.
https://matthewlein.com/tools/ceaser - 여기 사이트에서 자신이 필요로하는 timing-function을 선택하여 Code snippets, short and long-hand 부분을 복붙한다.
transition-delay : 애니메이션 효과가 몇초 지난 후 작동 할지 설정한다.

<div></div>

div {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  transition: all 1s;
}
div:hover {
  transform: translateX(600px);
  border-radius: 50%;
  background-color: red;
}

transition 속성을 변화를 줄 요소 자체에 쓴다. 그리고 기본 css를 주고 hover,active같이 이벤트에 변화할 값을 준다. transition만 쓰고 축약표현으로 property, duration, timingfunction, delay 순으로 설정 가능하다.

hover 전

hover 후

출처 - https://carina16.tistory.com/50

Animation

Animation도 transition과 비슷하게 애니메이션 효과를 주는데 @keyframes 속성과 같이 사용한다. transition과 차이점은 transition은 변화하는 속성값이 있어야 작동하고 @keyframes은 상태 변화와 상관 없이 작동도 되고 스스로 작동 / 반복가능 / 순방향, 역방향, 양방향 진행이 가능하다.

장점

• 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다.
• frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다.

animation 속성

animation-name - @keyframes로 정한 이름을 넣어준다. ( 애니메이션의 중간 상태를 지정하기 위해 숫자와 특수 문자로 이름이 시작되면 실행되지 않고 @keyframes속성이 있어도 none으로 설정하면 애니메이션을 재생하지 않는다. )
animation-duration - 애니메이션을 한번 재생하는 데 걸리는 시간 ( transition-duration ) 과 같다. ( 값이 양수여야 실행된다. )
animation-delay - 애니메이션이 시작을 지연할 시간을 지정한다.
0 : 속성을 적용하자마자 애니메이션을 시작한다. ( 기본값 )
숫자와 단위 : 설정한 시간이 지난 뒤에 애니메이션을 실행한다. 사용할 수 있는 단위는 초(s)와 밀리초(ms)이다.
animation-direction - 애니메이션의 재생 방향을 정의하는 속성
@keyframes 속성의 from 에 설정한 스타일에서 to에 설정한 스타일로 재생하는 것이 순방향이고, to에 설정한 스타일에서 from 에 설정한 스타일로 재생하는 것이 역방향이다.
normal : 애니메이션을 순방향으로 재생한다. ( 기본값 ) 재생이 한번 끝나면 첫 프레임부터 다시 시작한다.
alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 순방향으로 짝수 번째로 재생할 때는 역방향으로 재생한다.
reverse : 애니메이션을 역방향으로 재생한다. 재생이 한번 끝나면 마지막 프레임부터 다시 시작한다.
alternate-reverse : 역방향으로 애니메이션을 시작해 순방향과 역방향으로 번갈아 애니메이션을 재생한다. 홀수 번째로 재생할 때는 역방향으로 짝수 번째로 재생할 때는 순방향으로 재생한다.
animation-iteration-count - 애니메이션을 재생하는 횟수를 정의한다.
1 : 기본값 숫자가 음수면 애니메이션을 재생하지 않는다.
infinite : 애니메이션을 무한으로 반복한다.
animation-play-state - 애니메이션 재생 여부를 정의하는 속성
running : 애니메이션을 재생한다. ( 기본값 )
paused : 애니메이션을 정지한다.
animation-timing-function - 애니메이션의 키프레임 사이의 재생 속도를 조절하는 속성 재생하는 동안 단계별 재생 속도를 설정한다.
linear : 등속
ease : 기본값. 느리게 시작했다가 빨라졌다가 다시 느려짐
ease-in : 점점 빨라진다.
ease-in-out : 처음과 끝이 느림
ease-out : 점점 느려짐
cubic-bezier() 함수를 쓰면 속도를 커스텀마이징할수있다.
https://matthewlein.com/tools/ceaser - 여기 사이트에서 자신이 필요로하는 timing-function을 선택하여 Code snippets, short and long-hand 부분을 복붙한다.

@keyframes

애니메이션의 이름과 재생할 각 프레임의 스타일을 정의 하는 속성
from = 0%, to = 100% 0%부터 100% 중간의 퍼센트도 사용 가능

사용법

@keyframes 애니메이션명 {
  0% {
       변화값;
  }
  100% {
       변화값;
  }
}

<div></div>

div {
  width: 400px;
  height: 400px;
  border: 1px solid #000;
  animation: move 1s alternate 2;
}
@keyframes move {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(1000px);
  }
}

@keyframes로 변화줄 CSS속성을 적고 애니메이션을 사용할 요소에 animation 속성을 써서 적용한다.

출처 - https://webclub.tistory.com/621