[CSS 기초] 애니메이션

Urther·2021년 10월 5일

Html,Css

목록 보기

10/12

🐱 Animation

A에서 B라는 스타일이 변경된다는 점에서 transition과 동일.
하지만, transitiond은 사용자의 action 이 필요하고, animation은 사용자의 action이 없어도 된다.

Keyframes에 만든 것을 가져다 쓰는 것이 animation 이라 생각하면 편하다.

@keyframes

@keyframes identifier{
   0% { top: 0; left: 0;}
   30% { top : 50px; }
   60%, 70% {left: 50px}
   100% {top: 100px; left:100%;}

keyframes의 이름을 identifier로 설정한다.

시작에서부터 0%는 어떤 것을 하고, 30%는 또 어떤 것을 하고, 100%는 또 어떤 것을 한다라고 정해둔 것이다.

두 가지의 속성만을 정의하고 싶다면

@keyframes sildein{
  from{
    margin-left:100%;
    width:300%
   }
  to{
    margin-left:0%;
    width: 100%;
  }
}

from 과 to의 방식을 이용하면 된다.

예제 )
.ani{
  width:300px;
  height:150px;
  color: white;
  font-weight: bold;
  background-color: darkslategrey;
  animation: firstani 2s infinite alternate;
}
/* alternate는 자연스러운 이동을 위해 */
@keyframes firstani {
  from{width: 400px;}
  to{width: 200px;}  
}
마우스 올리는 순간 애니메이션을 설정해주고 싶으면, animation: firstani 2s infinite alternate;을 .ani:hover 을 만들어서 넣어도 된다.

1. animation-name

transition-property에 대응된다.

.box{
  background-color:rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
  animation name:rotate;
  animation-duration : 0.7s
 }

@keyframes rotate{
   0%{
   transform : rotate(0);
   }
   100%{
   transform : rotate(360deg);
  }
 }

keyframes의 rotate라는 이름을 animation-name을 rotate로 해주면 된다.

2. animation-duration

한 애니메이션 한 싸이클 완료되는데 걸리는 시간

3. animation-delay

음수 가능 !

양수 값 : 지정된 시간이 지나야 애니메이션이 시작 된다.
음수 값 : 애니메이션이 즉시 시작되지만, keyframe의 중간부터 시작한다.

4. animation-time-function

5. animation-iteration-count

반복 횟수를 정해줄 수 있다.

animation-iteration-count : iteration

→ 무한으로 반복 가능

animation-iteration-count : 1.5

→ 한번 하고, 중간에 멈춘다.

6. animation-direction

animation-direction : alternate : 정방향으로 갔다가 반대방향으로 바뀐다.

7. animation-play-state

animation을 일시정지하거나 running 하게끔 한다.

8. animation-fill-mode

애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정함

none(default 값)
forwards : 시작하고 나서 마지막(100% 혹은 to) 모습을 유지하는 것
backwards
both : forwards 와 backwards 두개 모두 적용

div{
  width:100px;
  height:100px;
  border: 10px solid green;
 }
.box1{
  background-color: rgb(245,255,229);
  animation: fill-mode 3s linear 1s;
 }
@keyframes fill-mode{
  0%{
    background-color : red;
   }
  50%{
   width : 200px;
  }
 100px{
   background-color:black;
  }
}

변하는 단계가 5가지가 존재한다.

1. 기존스타일
2. keyframes의 첫 번째
3. keyframes 진행 중인 것
4. keyframes의 마지막
5. 다시 기존스타일로 들어오는 것

animation은 2-4번을 반복하는 것이다.

forwards로 설정하면 4번에서 멈추는 것이다.

backwards로 설정하면 시작을 아예 2번부터 시작한다.