애니메이션 속성 - animation-play-state

애니메이션의 재생과 정지를 설정

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션 동작을 정지

body{
  padding: 20px;
}

.box::before{
  content:"running";
  font-size: 20px;
  color: white;
  font-weight: 700;
  
}
.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  animation: size-up 3s linear infinite alternate;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box:hover{
  animation-play-state: paused;
  background: dodgerblue;
}

.box:hover::before{
  content: "paused";
}

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

다음 소스코드를 설명하겠다.

 

.box::before --> 의 뜻은 box라는 클래스에서 before라는 가상함수를 만들어준다. content는 running인데, html에서 텍스트를 작성하는것과 동일한 결과를 가져온다. 왜 이렇게 한 이유는 html에서 작성된 텍스트는 css에서 내용을 변경할 수 없기 때문이기 때문이다. 그러므로 상황에 따라서 변경되는 텍스트는 html에서 작성하는것이 아닌 css에서 content에 작성해야한다. font-weight: 700은 font-weight: bold와 같은 뜻이며 수치로 나타내는것이 좋다.

 

.box:hover::before -->은 hover기능과 가상선택자 before을 한꺼번에 지정하는 방식이다. 그래서 hover되는 순간 content의 글씨는 running에서 pause라는 글씨로 변하게 만들었다.

 

그리고 반드시 애니메이션이 동작하게 할때, keyframes에서 이름을 지정하고 그 지정된 이름을 적용할 클래스, 아이디, 태그에 꼭 사용해서 연결하게 한 후에 애니메이션 속성값을 넣어야 한다.