[css] css만으로 애니메이션 효과주는 방법

웹 화면의 애니메이션 효과를 jquery의 animation 함수만을 이용해서 사용했었다면 CSS만으로 애니메이션 효과를 주는 방법을 알아보도록 하자

간단하게 

div안의 div위에 마우스르 올렸을때 움직이도록 해보자

<div class="container">
    <div class="move-box"></div>
</div>

간단하게 이런 html요소를 만들어 놓고

.container
{
    width:300px;
    height:60px;
    background-color:#FFF;
}

.move-box
{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#F0F;
}

.move-box:HOVER
{
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

이렇게 작성한다

결과는

그런데 이런식으로 하면 단방향으로 밖에 가지 않죠

저 소스에서 키프레임을

.container
{
    width:300px;
    height:60px;
    background-color:#FFF;
}

.move-box
{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#F0F;
}

.move-box:HOVER
{
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
     0%    {margin-left: 0%;}
    20%    {margin-left: 50%;}
    30%    {margin-left: 70%;}
    50%    {margin-left: 90%;}
    70%    {margin-left: 50%;}
    100%    {margin-left: 0%;}
}

keyframes 안의 내용이 from, to 에서 퍼센테이지로 바뀌었죠

이런식으로 바꾸면

아래와 같이 움직이게 됩니다.

animation-name: slidein;

애니메이션 네임을 지정하고 @keyframes 에 어떤식으로 움직일지 선언을 하면 됩니다.

duration은 애니메이션이 어느 시간에 걸쳐 일어나게 되는지 지정합니다.

이외에도 여러가지가 있는데 

아래와 같습니다.

animation-delay

엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.

animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.

animation-iteration-count

애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.

animation-name

이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  @keyframes 규칙을 이용하여 기술합니다.

animation-play-state

애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-timing-function

중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.