Animations 개요

요소에 애니메이션을 설정/ 제어

값	의미	기본값
animation-name	@keyframes 규칙의 이름을 지정	none
animation-duration	애니메이션의 지속 시간 설정	0s
animation-timing-function	타이밍 함수 지정	ease
animation-delay	애니메이션의 대기 시간 설정	0s
aniamtion-iteratrion-count	애니메이션의 반복 횟수 설정	1
anination-direction	애니메이션의 반복 방향 설정	normal
animation-fill-mode	애니메이션의 전후 상태(위치) 설정	none
animation-play-state	애니메이션의 재생과 정지 설정	running

 

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

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  
}

.box:hover{
  animation: first-animation 2s infinite alternate;
}

@keyframes first-animation{
  0% {width: 100px;}
  100% {width: 500px;}
}

소스코드를 해석하자면

@keyframes는 first-animation이라는 이름을 가진 속성을 설정을 하겠다.

0%인 처음에는 가로길이를 100px로 하겠고

100%인 마지막에는 가로길이를 500px하겠다.

hover에서는 first-animation이라는 이름을 가진 요소는 2초동안 무한으로 반복하고 크기가 늘어났다줄었다를 하겠다.

라는 뜻을 가진다.