애니메이션 속성- animation-timing-function, animation-delay (transition과 비슷함)

animation-timing-function

타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

 

 

animation-delay

애니메이션의 대기 시간 설정

값	의미	기본값
시간	대기 시간을 설정	0s

음수가 허용이 된다. 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작한다(애니메이션 주기 도중에 시작).

 

 

ho

.box{
  width: 150px;
  height: 100px;
  border-radius: 10px;
  margin: 10px;
  color: white;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1{
  background: tomato;
}
.box2{
  background: dodgerblue;
}
.box3{
  background: yellowgreen;
}

.box1:hover{
  animation: size-up 1s 2 alternate;
  animation-timing-function: linear;
  animation-delay:0s;
}
.box2:hover{
  animation: size-up 1s 2 alternate 1s linear;
}
.box3:hover{
  animation: size-up 1s 2 alternate linear -1s;
}

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

hover기능을 넣은 css 코드를 보면 각각 다른스타일로 작성되었지만 동일하게 동작을 한다. 만약에 단축속성으로 작성하고 싶다면, duration-time인 1s 보다 뒤에 작성만 된다면 순서를 아무렇게나 해도 상관이 없다.