[CSS] animation 속성과 사용법

🎯 animation 속성과 사용법

• 말 그대로 애니메이션 효과를 준다.
• 속성은 트랜지션과 다르지 않다.

 

📝 animation 속성

• animation-name : @keyframes 애니메이션 이름을 지정
• animation-duration : 애니메이션이 소요되는 시간 지정(s, ms)
• animation-timing-function : 애니메이션이 나타나는데 걸리는 시간, transition-timing-function과 동일
• animation-delay : 애니메이션 대기 시간 지정(s, ms)
• animation-iteration-count : 애니메이션 반복 횟수
• animation-direction : 애니메이션 진행 방향 설정
  • alternate: from → to -> from
  • normal : from → to, frrom → to.....
  • reverser: to → from, to → from

/* 한 줄로 작성할 때 순서 꼭 지켜줘야 된다. */
animation: name duration timing-function delay iteration-count direction fill-mode play-state

.animation {
        width: 300px;
        height: 300px;
        background-color: yellow;

        animation-name: changeWidth;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: 6;
        animation-direction: alternate;
    }

    @keyframes changeWidth {
        from { width: 300px; }
        to { width: 600px; }
    }

• keyframes
  • 애니메이션에만 사용할 수 있고 사용자가 지정해준 name이랑 꼭 매치시켜줘야 된다.
  • 지정해준 애니메이션 이름을 적어주고 속성들을 작성해준다.

 

📝 트랜지션과 애니메이션 차이점

• 트랜지션은 속성의 요소가 바뀌어야 동작(ex. 가상 클래스(:hover etc..))
• 애니메이션은 그냥 실행시킬 수 있다.
• 애니메이션 keyframes을 따로 지정해줄 수 있다.

 

📌 참고

• CSS3 Animation | PoiemaWeb