CSS Animations

What are CSS Animations?

CSS Animation을 사용하면 element를 변신시킬 수 있다!! (멋져멋져)

Animation을 사용하기 위해서는 먼저 animation을 위한 keyframe 구체적으로 명시해야 한다. 

이 Keyframes에는 특정한 시점에 도달했을 때, element가 어떤 스타일로 변신하게 될 지에 대한 정보가 담겨있다.

 

 

@keyframes에 담은 css styles가 작동하려면 element와 애니메이션을 연결해줘야 한다.

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

- 애니메이션을 넣고 싶은 div에 animation-name 속성을 넣어서 div와 animation을 연결한다.

 

- animation-duration 속성은 element 스타일 변화 시작부터 완성까지 걸리는 시간

animation-duration 속성이 선언되지 않으면 어떠한 변화도 일어나지 않는다. (default값이 0초이기 때문)

 

- @keyframes에서 from{} 속 스타일은 처음 모습, to{} 속 스타일은 변화 후 모습

 

 

 

 

 

 

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

 from{} to{}말고 이렇게 %를 사용하면

animation-duration:4s 중 

처음에는 배경 색이 red로 시작해서 점점 색이 변화하다,  4초 중 25%만큼 시간이 흐르면 yellow,

75%만큼 흐르면 blue,

마지막에는 green으로 배경색이 변한다.

 

 

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

div의 position을 relative로 주면 animation이 지속 되는 동안 위치도 바꿀 수 있다.

 

 

 

 

 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

animation-delay 속성을 넣어주면 animation이 바로 시작되지 않고 2초 delay된 후 시작.

(delay에 음수값을 넣어주면 이미 그 값만큼 animation이 진행됐다고 생각하고 animation이 시작된다.)

 

 

 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

animation-iteration-count를 넣어주면 animation이 몇 번 동작할 지 설정할 수 있다.

animation-iteration-count: infinite;로 설정하면 계~~~속 무한히 애니메이션이 동작한다.

 

 

 

 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

animation-direction 속성을 사용하면 애니메이션이 어떤 방향으로 동작할지 정할 수 있다.

animation-direction 속성은 총 4가지 값을 가질 수 있다.

animation-direction:noraml;

 - default값. forwards로 작동

animation-direction:reverse

 - reverse direction 즉, backwards로 작동

alternate

 - forwards 먼저 그리고 나서 backwards로

alternate-reverse

 - backwards 먼저 그리고 나서 forwards로

 

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

원래는 시계 방향(forwards)으로 한 바퀴 돌아야 하지만

animation-direction: reverse를 선언했기 때문에 반시계 방향(backwards)으로 한 바퀴 돈다.

 

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>

animation-direction: alternate;로 선언되었으니

시계 방향으로 한 바퀴, 반시계 방향으로 한 바퀴 돈다.(forwards->backwards)

 

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

animation-direction: alternate-reverse로 하면

반시계 방향으로 한 바퀴 먼저 돌고 시계방향으로 한 바퀴 돈다.(backwards->forwards)

 

 

 

 

 

animation-timing-function은 애니메이션의 speed curve를 조절할 수 있따.

animation-timing-function은 총 6개의 value를 가진다. 

- ease : start slowly -> fast -> end slowly (default)

- linear: 처음부터 끝까지 같은 속도

- ease-in: slow start

- ease-out: slow end

- ease-in-out: slow start and end

- (n,n,n,n) 자기가 설정할 수 있음

 

https://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_speed

Tryit Editor v3.6

(꼭 이 페이지를 참고해서 직접 눈으로 보시길..)

 

 

 

 

 

 

 

 

(당연하게도) keyframes 속 애니메이션이 작동하지 않을 때(animation이 시작되기 전이라든가, 끝이난 후)에는 target element의 style에 변화를 줄 수 없다. 

근데 animation-fill-mode 속성을 사용하면 애니메이션이 작동하지 않을 때도(animation 시작 전, 끝난 후) target element의 스타일을 변화시킬 수 있다.

 

- none: default값. 애니메이션이 실행되기 전, 후에는 target element의 어떤 스타일에도 영향을 주지 않는다.

 

- forwards

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}

element가 last keyframe에 설정된 style 값을 유지한다.

그래서 원상태로 돌아오지 않고 top:200px; background-color:blue;인 채로 머물러 있음.

 

 

 

-backwards

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}

element가 first keyframe에 적용된 스타일 값을 가지고 animation-delay동안 그 값을 유지하다가변화 시작!

그래서 이 예제에서는 처음에 노란색으로 2초 있다가

아래로 점점 내려가면서 붉은 색으로 변한다.

 

 

 

-both

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>

말그대로 forwards, backwards 모두 적용된다.

처음에 delay기간 동안 노란색으로 있다가(backwards) 2초가 지나면 아래로 움직이면서 파란색으로 변한다.

animation-duration이 끝나도 원상태로 돌아오지 않고 top:200px; background-color:blue;에서 멈춰있는다(forwards).

(div에 있는 background-color:red;는 override되서 나타나지 않음)

 

 

 

 

Animation Shorthand Property

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

이렇게 여러번 칠 필요 없이

 

div {
  animation: example 5s linear 2s infinite alternate;
}

이렇게 한 줄에 쓰면 된다.

 

animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction 

순서

이름 | 지속 | 타이밍 | 딜레이 | 몇번 | 방향