[CSS3] Transform 을 이용한 간단한 애니메이션 이미지 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 이미지 > [CSS3] Transform 을 이용한 간단한 애니메이션 이미지 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

[CSS3] Transform 을 이용한 간단한 애니메이션 이미지

해피팀

네티즌

소스분류

이미지

다운로드 횟수

154 회

간단설명

css3를 이용한 애니메이션으로 제작하시는 사이트에 포인트를 줄수 있습니다 ^^

평가하기

css3의 transform을 이용한 간단한 이미지 효과입니다.
이를 이용하여 사이트에 재미난 포인트를 줄수도 있겠네요 ^^
transform의 다른 속성들을 이용하시면 또 다른 효과도 적용할수 있을듯 합니다~

기존의 자바스크립트의 setTimeOut 등으로 구현해야했던 애니메이션 효과를 css3를 이용하여 사용하며 각 각의 키프레임에
따라 변화시키는 형식으로 만들어지게 됩니다.

    
            01
            @-webkit-keyframes 키프레임이름{

    
            02
                시작점 { 속성 }

    
            03
                30% { 속성 }

    
            04
                40% { 속성 }

    
            05
                50% { 속성 }

    
            06
                60% { 속성 }

    
            07
                70% { 속성 }

    
            08
                80% { 속성 }

    
            09
                종료 { 속성 }

    
            10
                }

시작점과 종료지점을 설정한 후 키프레임을 생성하는 단계의 단위를 %로 생성하세요.
웹킷엔진 기반의 브라우저에서는 @-webkit-keyframes 로 지정해주어야지 정상 동작합니다~

속성값은 아래부분을 참조하세요~

-webkit-animation-name:'heart'; -키프레임이름-
-webkit-transform: scale(1) - 1,2,3 정수 또는 1.5, 3.2 등 소수점으로 사용이 가능합니다~ 숫자만 큼 배수로 확대합니다 -
-webkit-animation-duration: 3000ms; - 애니매이션의 지속시간을 설정합니다 (3000ms 3초)
-webkit-animation-iteration-count: infinite; - 반복설정 (반복)