시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > CSS > 이미지 > [CSS3] Transform 을 이용한 간단한 애니메이션 이미지 상세정보
사이트등록
현재접속자 새로고침
[CSS3] Transform 을 이용한 간단한 애니메이션 이미지
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 이미지
다운로드 횟수 89 회
간단설명 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 로 지정해주어야지 정상 동작합니다~


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




위와같이 속정값을 설정하신 후 이미지에 적용하시면 재미난 transform 효과를 보실 수 있습니다.
첨부해드린 파일을 확인하시면 쉽게 적용이 가능하실듯 합니다~~




네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
도배방지키
 27394736 보이는 도배방지키를 입력하세요.