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%);}
        }

속성값 참고>

ease-in 기본형으로 시작이 빠르게
ease-in-out  시작과끝이 빠르게
lieaner  일정속도
ease-out 끝이 빠르게
alternate 앞에부터 뒤까지 진행하고 다시 뒤에서 앞으로 진행
normal  앞에서부터 뒤로 진행
reverse 뒤에서 앞으로 진행
추천
0

댓글 0개

전체 1,230
퍼블리셔팁 내용 검색

회원로그인

진행중 포인트경매

  1. 참여1 회 시작22.08.09 20:51 종료22.08.14 20:51
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT