[html][css] animation효과 주기/ @keyframes , animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

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

 

<커졌다가 작아졌다가 하는 애니메이션> 

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

.box{
  width:100px;
  height: 100px;
  background: black;
  
}
.box:hover{
  animation: first-animation 2s infinite alternate;
}
@keyframes first-animation{
  0%{
    width: 100px;
  }
  100%{
    width: 500px;
  }
}

 

---

 

 

@keyframes

2개 이상의 애니메이션 중간 상태(프레임)을 지정

.box{
  width:100px;
  height: 100px;
  background: black;
  
}
.box:hover{
  animation: my-animation 1s infinite alternate;
}
@keyframes my-animation{
  0%{
    width: 100px;
    background: tomato;
  }
  50%{
    width: 500px;
  }
  100%{
    border-radius: 100px;
  }
}

---

animation-name

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

 

animation-duration

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

 

animation-delay

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

음수가 허용됨. 음수가 있을 경우 애니메이션은 바로 시작되지만 그 값만큼 애니메이션이 앞서 시작한다.

애니메이션 주기 도중에 시작된다.

 

animation-iteration-count

애니메이션 반복횟수를 설정

숫자/ infinite

 

animation-direction

애니메이션 반복 방향을 설정

normal: 정방향만 반복

reverse: 역방향만 반복

alternate: 정방향에서 역방향으로 반복

alternate-reverse: 역방향에서 정방향으로 반복

 

<div class="box box1">0s</div>
<div class="box box2">1s</div>
<div class="box box3">-1s</div>

.box{
  width: 150px;
  height: 100px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1{
  background: tomato;
}
.box2{
  background: dodgerblue;
}
.box3{
  background: yellowgreen;
}
.box1:hover{
  animation: size-up 1s alternate infinite linear;
  animation-delay: 0s;
}
.box2:hover{
 animation: size-up 1s alternate infinite;
    animation-delay: 1s;
}
.box3:hover{
 animation: size-up 1s alternate infinite;
    animation-delay: -1s;
}
@keyframes size-up{
  0%{
    width: 100px;
  }
  100%{
    width: 200px;
  }
}

A Pen by leehyeonj (codepen.io)

OJWwaGo

코드펜에서 실행해보기

 

---

.box{
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 100px;
  margin: 30px;
  animation: movemove 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes movemove{
  0%{
    transform: translate(0px,0px);
  }
  25%{transform: translate(100px,0px);}
  50%{transform: translate(100px,100px);}
  75%{transform: translate(0px,100px);}
  100%{transform: translate(0px,0px);}
}

 

---

animation-fill-mode

애니메이션 전후 상태(위치)를 설정

none: 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동-> 동작-> 기존 위치에서 끝

forwards: 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동-> 동작-> 애니메이션 끝 위치에서 끝

backwards: 애니메이션 시작 위치로 이동-> 동작-> 기존 위치에서 끝

both: 애니메이션 시작 위치로 이동-> 동작-> 애니메이션 끝 위치에서 끝

 

---

animation-play-state

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

running: 애니메이션을 동작

paused : 애니메이션 동작을 정지

 

<움직이다가 hover하면 pause글자로 바뀌면서 애니메이션이 멈추는 예제>

.box{
  width: 150px;
  height: 100px;
  background: blue;
  border-radius: 100px;
  margin: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: size-up 0.5s alternate infinite linear;
}
.box::before{
  content:"running";
  font-size: 30px;
  color: white;
  font-weight: bold;
}

.box:hover{
  animation-play-state: paused;
  background: tomato;
}
.box:hover::before{
  content:"paused";
}
@keyframes size-up{
  0%{
    width:150px;
  }
  100%{
    width: 100%;
  }
}

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