Animation 동작 효과 주기

Animation 동작 효과 주기 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

Animation 동작 효과 주기 정보

CSS Animation 동작 효과 주기

본문

animation	모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
animation-name	애니메이션 효과의 이름을 설정함.
animation-duration	애니메이션 효과를 재생할 시간을 설정함.
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정함.
animation-direction	애니메이션의 진행 방향을 설정함.
animation-timing-function	애니메이션 효과의 시간당 속도를 설정함.
animation-fill-mode	애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정함.
animation-play-state	애니메이션 효과의 재생 상태를 설정함.

예시>

HTML

  <div class="ani1"></div>
  <div class="ani2"></div>

CSS

.ani1{width:100px; height: 100px; margin: 50px auto 0 auto; background: #39e2f2;}
        .ani1:hover{animation: ani 1s ease-in-out .5s 2 alternate;}
        @keyframes ani{
            from{transform: scale(1) translate(0);}
            to{transform: scale(1.5) translate(20%);}
        }
.ani2{width:100px; height: 100px; margin: 100px auto 0 auto; background: #cf243f;}
        .ani2:hover{animation: ani 1s linear infinite alternate;}
        @keyframes ani{
            from{transform: scale(1) translate(0);}
            to{transform: scale(1.5) translate(20%);}
        }

속성값 참고>