그누보드 - 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%);}
        }

속성값 참고>