CSS3 keyframes / animation

@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes mymove{
    from {top:0px;}
    to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */{
    from {top:0px;}
    to {top:200px;}
}

@keyframes 내부에 css 스타일을 정의하고 animation 은 “from”에 정의된 스타일에서 출발하여 “to”에 새롭게 정의된 스타일로 점차적으로 변화되는 것이다. from 에서 to까지과정에서 변화를 주려면 아래와 같이 정의 한다.

@keyframes mymove{

    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */{
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

CSS3의 애니메이션 관련 속성 4가지

  1. animation-duration : 애니메이션의 동작 시간('1s','0.5s'와 같은 형식으로 지정)

  2. animation-iteration-count : 애니메이션의 동작 회수('infinite'를 지정하면 무한 반복)

  3. animation-name : 애니메이션의 이름

  4. animation-timing-function : 애니메이션의 타이밍

 

animation-timing-function 속성에 지정할 수 있는 값의 의미 6가지

  1. ease : 시작과 종료를 부드럽게

  2. linear : 일정

  3. ease-in : 서서히 시작

  4. ease-out : 서서히 종료

  5. ease-in-out : 서서히 시작하여 서서히 종료

  6. cubic-bezier(x1,y1,x2,y2) : 3차 배지에 곡선의 P1과 P2를 (x1,y1,x2,y2)로 지정

CSS3의 애니메이션 관련 속성 4가지

  1. animation-duration : 애니메이션의 동작 시간('1s','0.5s'와 같은 형식으로 지정)

  2. animation-iteration-count : 애니메이션의 동작 회수(디폴트1, 'infinite'를 지정하면 무한 반복)

  3. animation-name : 애니메이션의 이름

  4. animation-timing-function : 애니메이션의 타이밍

  5. animation-direction:normal,alternate (alternate적용시 부드럽게)

Transform

transform:translate(X크기,Y크기) : x,y크기만큼 이동

transform:translateX(X크기) : x크기만큼 이동

transform:translateY(Y크기) : y크기만큼 이동

transform:scale(X크기,Y크기) : x,y배율만큼 늘어나거나 줄어듬

transform:scaleX(X크기) : x크기만큼 확대나 축소

transform:scaleX(Y크기) : y크기만큼 확대나 축소

transform:skew(X각도,Y각도) : x,y만큼 기울이기

transform:skew(X각도) : x만큼 기울이기

transform:skew(Y각도) : y만큼 기울이기

transform:rotate(각도) : 각도만큼 회전

Ex)

한줄로 쓸때

span.cloud_low{

-webkit-animation:cloud_low ease-in-out 2s infinite alternate;

animation:cloud_low ease-in-out 4s infinite alternate;

}

여러줄로 쓸때

span.cloud_low {

-webkit-animation-name:cloud_low; /* @ keyframes 애니메이션의 이름을 지정한다. */

-webkit-animation-timing-function:ease-in-out; /* 애니메이션이 사이클 동안 어떻게 진행되는가를 설명한다. 디폴트는 "ease" */

-webkit-animation-duration:2s; /* Default 0 애니메이션 한 사이클을 완료하는데 걸리는 초 또는 밀리 초를 지정한다 */

-webkit-animation-iteration-count:infinite; /* 애니메이션이 재생되는 횟수를 지정한다. */

-webkit-animation-direction:alternate; /* 애니메이션을 역방향으로 재생해야 할지 여부를 지정한다. */

-webkit-animation-delay:0; /* 애니메이션 시작 될 때 지연 시간을 지정한다. 디폴트는 0 */

-webkit-animation-play-state:running; /* 애니메이션을 실행하거나 일시 정지 여부를 지정 디폴트는 "running */

}

@-webkit-keyframes cloud_low {

    0% {-webkit-transform:translate(0px, 0px);  opacity:0.5;} /* from */

    100% {-webkit-transform:translate(0px, 8px);} /* to */

}