4일차 : CSS Animation

Animation

animation 선언은 @keyframes로 하는 것

 

단축속성

animation : 이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];

 

예시

.box {
  width: 100px;
  height: 100px;
  background: tomata;
}
.box:hover {
  animation: hello 2s linear infinite alternate; // alternate하면 반대도 모션 구현된다.
}

@keyframes hello {
  0% {
    width: 100px;
  }
  100% {
    width: 500px;
  }
}

✅  트랜지션이랑 무엇이 다른가?

트랜지션은 0%와 100%로 이루어져 있는데

animation과 keyframe를 이용하면 중간 과정을 만들 수 있다.

 

✅  alternate 속성을 쓸 때

infinite 이거나 반복 횟수가 2이상이어야 작동한다.

왜냐하면 돌아가는 것도 횟수로 치기 때문이다.

기본으로 1이 되있어서 alternate하더라도 기본속성이면 거기서 끝난다.

 

✅  animation-fill-mode : both;

애니메이션이 끝나는 지점에 멈추게 할 수 있다.

✅  animation-play-state : paused;

애니메이션이 중간에 멈추게 할 수 있다. :hover랑 같이 사용 많이한다.

 

응용 (도형안에 글자가 들어가있고 마우스를 올리면 글자가 paused로 바뀌게)

<div class="box"></div>

 

.box {
  background: tomato;
  width: 150px;
  height: 100px;
  animation: size-up 3s linear infinite alternate;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.box::before {
  content: "running";
  font-size: 20px;
  color: white;
}
.box:hover {
  animation-play-state: paused;
}
.box:hover::before {
  content: "paused";
}

@keyframes size-up {
  0% {
    width: 150px;
  }
  100% {
    width: 100%;
  }
}