기초) animation 속성 정리

 

 

      

 

animation은

 

 

transition과 비슷하지만

마우스를 대상에 올린다던가 체크를 한다던가

탭 포커스를 한다던가 등의 조건 없이

원하는 대상을 자동적으로 움직이게 만드는

기능이 있다.

 

 

트랜지션은

요소가 동작 후, 원상태로 복귀할 때

별도의 설정을 하지 않아도자연스럽게

원상 복귀가가능했는데

 

 

애니메이션의경우 특정 값을 설정하지 않으면

원상 복귀모션이없으니주의하자.

 

 

 

사용법은 transition과 거의 같다.

 

 

 

---

 

 

사용법

 

 

 

<style>
    div { position:relative;
      width: 200px; height: 200px; border: 1px solid red;
      animation-name: move;
      animation-duration: 2s;
      animation-delay: 1s;
      animation-iteration-count: infinite;
      animation-time-function: ease;
      animation-direction: alternate;
    }
     @keyframes move {
          0% { left: 0; background:gray;}
          100% { left: 300px; background: red;}
    }

 

 

 

 

 

 

 

 

@keyframes

 

 

transition이 hover와 같이 다니듯

효과 주기를 원하는 요소 바로 다음에

@keyframes설정을 만들어 주고

원하는 이름을 달아준다.

(위의 경우 move)

 

keyframe에 원하는 설정값을 넣어주고

해당 요소에 aniamtion-name 속성을 추가,

@keyframes에 지정한 이름을

동일하게 넣어준다. (move)

 

 

 

 

 

 

 

속성 기능

 

animation-name : 대상 이름

animation-duration : 동작 시간

animation-delay :동작 전 대기시간

animation-iteration-count: 반복 횟수

animation-time-function: 동작 속도

animation-direction: 동작 방향

 

 

*animation-direction의 경우

위 코드에서는 값을 alternative로

주었기에 원상 복귀 모션이 있는 듯

보이지만, 기본값이나 기타

다른 값을 넣는 경우

 

원상 복귀 모션이 따로 없으니

참조하자

 

예)

animation-direction: normal;

 

 

 

 

 

 

---

 

 

 

 

실무

 

 

위 속성값을

일일이 나열하지 않고도

한 줄에 몰아 쓰는 방법이 있고

역시 transition과 동일.

 

 

 

p { width:300px; height:200px; border: 1px solid red;
        animation: change 3s ease 0s infinite alternate;
    }
        @keyframes change {
          0% { background: white;}
          50% { background: pink;}
          100% { background: red;}
        }

 

 

 

 

출처: 유튜브 리베하얀님 css3 animation 강의 중