css3 Animations 속성 (animation, keyframes)

 

 

 

css3 애니메이션 특성

특성	설명
@keyframes	애니메이션 코드를 지정합니다
animation	모든 애니메이션 속성을 나열해서 표현 가능한 속성입니다.
animation-delay	애니메이션 시작 전 딜레이 시간을 설정하는 속성입니다.
animation-direction	애니메이션의 방향을 설정하는 속성입니다.
animation-duration	애니메이션이 플레이되는 시간을 설정하는 속성입니다.
animation-iteration-count	애니메이션을 재생해야 하는 횟수를 설정하는 속성입니다.
animation-name	애니메이션 네임 속성입니다.
animation-play-state	애니메이션 일시 중지를 설정하는 속성입니다.
animation-timing-function	애니메이션의 속도 스타일을 설정하는 속성입니다.

 

 

 

브라우저 호환성

 

 

 

 

/* The animation code */
@keyframes change {
    from {background-color: red;}
    to {background-color: yellow;}
 }


/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: change;
    animation-duration: 8s;
 }

위 코드는 백그라운드 색상이 레드에서 옐로우로 8초동안 변하게 해주는 스타일시트입니다.

 

 

 

/* The animation code */
@keyframes change {
    0% {background-color: red;}
    25% {background-color: yellow;}
    50% {background-color: blue;}
    100% {background-color: green;}
 }


/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: change;
    animation-duration: 8s;
}

위 코드는 8초동안 백그라운드 칼라를 레드>옐로우>블루>그린으로 변화시켜 줍니다. 각 칼라가 변화는 시점은 @keyframes change에서 퍼센트로 설정해 줍니다.

 

 

 

/* The animation code */
@keyframes move {
    0% {background-color: red; left; 20px;}
    25% {background-color: yellow; left; 40px;}
    50% {background-color: blue; left; 60px;}
    100% {background-color: green; left; 80px;}
 }


/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: move;
    animation-duration: 8s;
}

위 코드는 8초동안 div 의 색상을 변화시키며 위치를 움직여 줍니다.

 

애니메이션을 줄 때 딜레이를 주고 싶으면 animation-delay: 2s;를 넣어서 딜레이 시간 설정이 가능합니다.

애니메이션을 반복해서 주고 싶으면 animation-iteration-count: 3;를 넣어서 반복 숫자를 설정할 수 있습니다.
(무한 반복일때는 animation-iteration-count: infinite;를 넣어줍니다.)

애니메이션을 반대로 움직임을 주고 싶을때는 animation-direction: reverse; 를 넣어줍니다.

animation-direction: alternate;과 animation-iteration-count: 3; 를 소스에 함께 넣어주면, 정방향으로 애니메이션을 한번 플레이하고, 다음번에는 역방향으로 한번 플레이하고, 정방향으로 한번 플레이 하게 됩니다.

 

 

 

<style>
div {
    width: 100px;
    height: 50px;
    background-color: red;
    font-weight: bold;
    position: relative;
    animation: mymove 5s infinite;}
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */

/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
</style>


<div id="div1">linear</div>  //시작부터 끝까지 같은 속도로 애니메이션을 지정합니다.
<div id="div2">ease</div>  //기본 설정입니다.
<div id="div3">ease-in</div>  //느린 시작으로 애니메이션을 지정합니다.
<div id="div4">ease-out</div>  //느린 끝으로 애니메이션을 지정합니다.
<div id="div5">ease-in-out</div>  //느린 시작과 끝으로 애니메이션을 지정합니다.

위 코드는 애니메이션 스타일에 관련된 설정입니다.

 

간략하게 애니메이션 효과를 불러올때는 animation: move 5s linear 2s infinite alternate; 로 나타냅니다.
(animation:애니메니션명 플레이시간 애니메이션스타일 딜레이 반복횟수 방향;)