애니메이션 속성- animation-name, animation-duration

animation-name

@keyframes규칙(애니메이션 프레임)의 이름을 지정

값	의미	기본값
none	애니메이션을 지정하지 않음	none
@keyframes 이름	이름이 일치하는 @keyframes 규칙의 애니메이션을 적용

 

 

animation-duration

애니메이션의 지속시간 설정

ms단위도 사용 가능하다.

값	의미	기본값
시간	지속 시간을 설정	0s -->지속시간이 없는 경우이다.

 

 

 

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
}

.box:hover{
  animation-name: my-animation;
  animation-duration: 3s;
}

@keyframes my-animation{
  0%{
    width: 100px;
    background: tomato;
  }
  75%{
    width: 500px;
    background: dodgerblue;
  }
  100%{
    width: 300px;
    background: yellowgreen;
  }
}

이와같이 animation-name 과 animation-duration을 함께 지정해 줄 수 있다.