106 웹킷 CSS 바이블 레퍼런스편 서미연, 강영주, 김대현, 김영호, 김훈민, 민경환, 양주희, 정다운, 조은지음
106 웹킷 CSS 바이블레퍼런스편 서미연, 강영주, 김대현, 김영호, 김훈민, 민경환, 양주희, 정다운, 조은지음
웹킷 CSS 바이블레퍼런스편 초판발행 2015 년 8 월 25 일 지은이서미연, 강영주, 김대현, 김영호, 김훈민, 민경환, 양주희, 정다운, 조은 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 6월 24일제10-1779호 ISBN 978-89-6848-767-5 15000 / 정가 35,000원 총괄배용석 / 책임편집김창수 / 기획 편집김상민디자인표지 / 내지여동일, 조판최송실마케팅박상용 / 영업김형진, 김진불, 조유미 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 www.hanbit.co.kr / 이메일 ask@hanbit.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c 2015 서미연 & HANBIT Media, Inc. 이책의저작권은서미연과한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanbit.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.
저자소개 지은이 _ 서미연 웹디자이너로시작한지 10년. 시대의트렌드에따라저의관심사는웹이라는한울타리안에서계속변화해왔고현재 NHN Technology Services에서프론트엔드개발자로일하고있습니다. 네이버와함께하는 HTML5 개발전략 > 웹킷 CSS 강의경력이있으며, 기술을공유하는것을좋아하지만, 부끄럼도많은수줍은개발자입니다. 지은이 _ 강영주 현재 NHN Technol ogy Servic es 에서프론트엔드개발자로일하고있습니다. 지은이 _ 김대현 NHN Technology Services 에서프론트엔드개발자로일하고있습니다. 웹기술 에관심이많고코딩과삽질을즐기는평범한개발자입니다. 지은이 _ 김영호 탁트인자연과쭉뻗은도로, 바람을좋아하는 " 바이크라이더 " 김영호입니다. 현재 NHN Technology Services에서프론트엔드개발자로일하고있습니다. 네이버 2012 대선, 2014 브라질월드컵, 건강, 게임등다양한서비스를담당해왔으며현재는네이버지식쇼핑개발을맡고있습니다. 웹기술에관심이많고호기심많은근성있는개발자입니다.
지은이 _ 김훈민 자바개발자로입문해서현재는 NHN Technology Services 프론트엔드개발팀에 서 Ajax UI 개발자로근무하고있습니다. http://huns.me 블로그를운영하고있으 며, 항상 " 왜?" 라는질문을던지려애쓰는중입니다. 지은이 _ 민경환 NHN Technology Services에서프론트엔드개발자로근무하고있습니다. 마크업, 자바스크립트등프론트엔드개발을사랑하며브라우저에서일어날수있는모든일에관심두고있습니다. 네이버에서스마트에디터, 포스트, 네이버캐스트등의개발을담당했습니다. 프로젝트에서얻은경험을바탕으로반응형웹, 플렉서블레이아웃등사내 / 외기술전파에힘쓰고있습니다. 평소엔사소한개발주제로심각하게토론하는것과맥주마시는것을즐기며마음의정리가필요할땐홀로여행을떠납니다. 지은이 _ 양주희 현재 NHN Technology Services 에서프론트엔드개발자로일하고있습니다. 디 자이너에서직업을바꾼지 2 년째인새내기개발자이지만, 새로운기술들을사용하는 데큰즐거움을느낍니다.
지은이 _ 정다운 현재 NHN Technology Services에서프론트엔드개발자로일하고있습니다. 전직장에서디자이너, 액션스크립터로서의경험을통해웹에서그려지는 UI/UX에관해관심을두게되었고, 지금도웹기술의여러방면에관심을가지고배우려고노력중입니다. 이외에도그림을그리기나우쿨렐레에도관심이많은개발자입니다. 지은이 _ 조은 현재 NHN Technology Services에서프론트엔드개발자로일하고있습니다. 웹표준커뮤니티클리어보스리더를맡고있으며, 한국웹표준프로젝트멤버로도활동하고있습니다. 치킨을좋아하며사람을만나는걸좋아하고 UX에도관심이있어, 기술과인간이어떻게더밀접한관계를맺을수있을까늘고민하고있습니다.
저자서문 웹개발자로일한지 5년이돼간다. PC 웹의 UI 마크업업무를주로담당했지만, 몇해전부터스마트폰의보급으로모바일웹시장이형성되면서모바일웹마크업업무도점점늘어나고있다. 모바일웹기술에대한관심이점점높아지면서웹킷 CSS 속성도점점많이사용하는추세다. PC 웹에서는제대로활용할수없었던웹킷 CSS 속성을모바일웹에서는적극적으로사용하면서마크업업무의효율성이높아졌다. 한사례로마크업개발자의업무중에는성능최적화를위해 CSS 파일의크기를줄이는작업이있다. CSS 파일의크기를줄이는작업은필요하지않은속성을삭제하는것이다. 다양한브라우저에대응하기위해같은효과를내는 CSS를여러줄사용해야할때가많은데이런불필요한 CSS를웹킷 CSS 속성으로줄여서해결한경우가많았다. 그외에도대표적인브라우저에모두대응해야하는 PC 웹서비스의특성때문에적용할수없던웹킷 CSS 속성을모바일웹에서는다양하게시도해적용해볼수있었다. 웹킷 CSS 속성에더많은관심을두기시작했고웹킷 CSS 속성을공부하기시작했다. 국내에는아직웹킷 CSS 속성에관한자료가부족해웹킷 CSS 속성레퍼런스를한권의책으로정리한다면좋겠다는생각에이책을쓰기로했다. 웹킷 CSS가나에게주었던다양한경험과편리함이독자에게도전해지기를희망한다. 지은이 _ 서미연
웹은지난 20년간많은변화를겪으며세계에서가장많이사용하며사랑받는기술이다. 기술이발전함에따라사람들의요구는커졌고, 그런요구를충족하기위해웹은다양한변화와발전을거듭했다. 웹킷은웹의변화와발전에가장빠르게대응하고진화하는엔진으로웹킷을기반으로제작한블링크엔진을사용하는크롬브라우저는전세계적으로압도적인점유율을보이고있으며, 모바일에서는웹킷을빼놓고는이야기하기힘들정도로웹킷은많은영향력을가지고있다. 웹킷 CSS를안다는것은단순히 ' 웹킷에만기술을도입한다 ' 라는것이아닌, 표준을주도하는엔진인웹킷에적용되는기술을먼저앎으로써빠르게변화하는웹기술에대한빠른대응능력및선도능력을지닐수있게한다. 또한, 웹킷은오픈소스를기반으로하고있으므로노드 JS와함께사용하여웹기반의멀티플랫폼네이티브게임제작, 스마트 TV나 Watch 등에내장된브라우저의엔진을웹킷으로사용하는곳에서웹기반의애플리케이션을제작하는것도가능하게한다. 웹킷은앞으로도표준을선도하는엔진으로서꾸준히발전해나갈것이다. 언젠가는웹킷이아닌다른브라우저또한표준을준수하며발전해나갈것이고, 웹킷 CSS를앎으로써미래에대응할수있기를바란다. 지은이 _ 조은
들어가며 이책에서다루는내용이책에서는웹킷엔진기반의브라우저에서사용할수있는웹킷 CSS 속성을다룬다. 책의구성약 113가지의최신웹킷 CSS 속성을다룬다. 이장에서웹킷 CSS 속성의정의, 지원환경, 구문, 예제, 참고속성등을다룬다. 책의구조이책에서다루는예제코드는 HTML5 표기방법으로작성됐다. 예제에사용한소스코드와이미지는다음주소에서내려받을수있다. 소스코드와이미지다운로드 : https://github.com/webkittf/webkitcss 각속성에있는예제코드주소로 PC나모바일에서웹킷 CSS 속성이어떻게동작하는지확인할수있다. 예제코드는오픈소스인 jsbin.com에서작성했기때문에예제코드주소뒤에 '/edit' 를입력하면직접코드를수정해테스트할수있다. 예제코드링크 : http://jsbin.com/-webkit-animation 편집모드링크 : http://jsbin.com/-webkit-animation/edit 예제코드는 QR 코드도함께제공해무료 QR 코드리더기를스마트폰에설치하면 QR 코드를통해모바일에서쉽게예제를볼수있다. 코드구조예제코드는기본 HTML5 구조에해당하는코드는생략하고 <style> 태그와 <div> 태그, <script> 태그가있는부분만표시한다. <!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width =device-width,initialscale =1.0,minimum-scale=1.0,maximum-scale=1.0"> <title>-webkit-</title> <style> div { font-size: 14px; </style> </head> <body> <div>hello,world!</div> <script></script> </body> </html> 지원환경 지원환경은웹킷엔진을기반으로동작하는브라우저를기준으로다음표에있는브 라우저만확인했다. 15 이상 ios 안드로이드 O O O O O 예제에있는속성적용결과는크롬 39에서확인한화면이다. 웹킷엔진은애플사파리에처음적용됐지만이책에서다루는웹킷 CSS 속성가운데일부는사파리에서정상적으로작동하지않는다. 그래서사파리보다브라우저점유율도높고이책의웹킷CSS 속성이모두정상적으로작동하는크롬에서예제를확인했다.
먼저알아야할것 HTML5와 CSS에관한전반적인지식과자바스크립트, jquery에관한초급정도의지식이있어야이책의전반적인내용을이해할수있다. 독자의프로젝트에적용한다면더쉽게이해할수있을것이다.
한빛 ebook 리얼타임 한빛 ebook 리얼타임은 IT 개발자를위한 ebook 입니다. 요즘 IT 업계에는하루가멀다하고수많은기술이나타나고사라져갑니다. 인 터넷을아무리뒤져도조금이나마정리된정보를찾기도쉽지않습니다. 또한, 잘정리되어책으로나오기까지는오랜시간이걸립니다. 어떻게하면조금이라 도더유용한정보를빠르게얻을수있을까요? 어떻게하면남보다조금더빨 리경험하고습득한지식을공유하고발전시켜나갈수있을까요? 세상에는수 많은종이책이있습니다. 그리고그종이책을그대로옮긴전자책도많습니다. 전자책에는전자책에적합한콘텐츠와전자책의특성을살린형식이있다고생 각합니다. 한빛이지금생각하고추구하는, 개발자를위한리얼타임전자책은이렇습니다. 1 ebook First - 빠르게변화하는 IT 기술에대해핵심적인정보를신속하게제공합니다 500페이지가까운분량의잘정리된도서 ( 종이책 ) 가아니라, 핵심적인내용을빠르게전달하기위해조금은거칠지만 100페이지내외의전자책전용으로개발한서비스입니다. 독자에게는새로운정보를빨리얻을기회가되고, 자신이먼저경험한지식과정보를책으로펴내고싶지만너무바빠서엄두를못내는선배, 전문가, 고수분에게는좀더쉽게집필할수있는기회가될수있으리라생각합니다. 또한, 새로운정보와지식을빠르게전달하기위해 O'Reilly의전자책번역서비스도하고있습니다. 2 무료로업데이트되는전자책전용서비스입니다 종이책으로는기술의변화속도를따라잡기가쉽지않습니다. 책이일정분량이상으 로집필되고정리되어나오는동안기술은이미변해있습니다. 전자책으로출간된이 후에도버전업을통해중요한기술적변화가있거나저자 ( 역자 ) 와독자가소통하면서보완하여발전된노하우가정리되면구매하신분께무료로업데이트해드립니다.
3 4 독자의편의를위해 DRM-Free 로제공합니다 구매한전자책을다양한 IT 기기에서자유롭게활용할수있도록 DRM-Free PDF 포맷으로제공합니다. 이는독자여러분과한빛이생각하고추구하는전자책을만들어나가기위해독자여러분이언제어디서어떤기기를사용하더라도편리하게전자책을볼수있도록하기위함입니다. 전자책환경을고려한최적의형태와디자인에담고자노력했습니다종이책을그대로옮겨놓아가독성이떨어지고읽기어려운전자책이아니라, 전자책의환경에가능한한최적화하여쾌적한경험을드리고자합니다. 링크등의기능을적극적으로이용할수있음은물론이고글자크기나행간, 여백등을전자책에가장최적화된형태로새롭게디자인하였습니다. 앞으로도독자여러분의충고에귀기울이며지속해서발전시켜나가도록하겠 습니다. 지금보시는전자책에소유권한을표시한문구가없거나타인의소유권한을표시한문구가있다면위법하게사용하고있을가능성이큽니다. 이경우저작권법에따라불이익을받으실수있습니다. 다양한기기에사용할수있습니다. 또한, 한빛미디어사이트에서구매하신후에는횟수에관계없이내려받으실수있습니다. 한빛미디어전자책은인쇄, 검색, 복사하여붙이기가가능합니다. 전자책은오탈자교정이나내용의수정 보완이이뤄지면업데이트관련공지를이메일로알려드리며, 구매하신전자책의수정본은무료로내려받으실수있습니다. 이런특별한권한은한빛미디어사이트에서구매하신독자에게만제공되며, 다른사람에게양도나이전은허락되지않습니다.
차례 Part 1 Animation 001 -webkit-animation: 애니메이션을설정한다 003 -webkit-animation-delay: 애니메이션지연시간을설정한다 007 -webkit-animation-direction: 애니메이션재생방향을설정한다 011 -webkit-animation-duration: 애니메이션재생시간을설정한다 015 -webkit-animation-fill-mode: 애니메이션시작과끝스타일을설정한다 017 -webkit-animation-iteration-count: 애니메이션을무한으로재생한다 024 -webkit-animation-name: 애니메이션이름을설정한다 027 -webkit-animation-play-state: 애니메이션에정지와재생기능을추가한다 029 -webkit-animation-timing-function: 애니메이션재생속도를제어한다 031 @-webkit-keyframes: 스크립트없이애니메이션을재생한다 039 Part 2 Transition 043 -webkit-transition: 요소에마우스포인터를올렸을때애니메이션을실행한다 045 -webkit-transition-delay: transition 애니메이션에서지연시간을설정한다 048 -webkit-transition-duration: transition 애니메이션에서애니메이션시간을설정한다 050 -webkit-transition-property: transition 애니메이션에서변경할속성을설정한다 052 -webkit-transition-timing-function: transition 애니메이션에서재생속도를설정한다 063
Part 3 Flexible 067 -webkit-box-align: 예전방식레이아웃상자의자식요소를정렬한다 069 -webkit-box-direction: 예전방식레이아웃상자의자식요소를배치하는방법을설정한다 081 -webkit-box-flex: 예전방식레이아웃상자의자식요소에 flex 속성을설정한다 087 -webkit-box-flex-group: 예전방식레이아웃상자의자식요소를그룹으로묶는다 094 -webkit-box-lines: 예전방식레이아웃상자의줄바꿈을설정한다 098 -webkit-box-ordinal-group: 예전방식레이아웃상자의자식요소순서를설정한다 099 -webkit-box-orient: 예전방식레이아웃상자의레이아웃방향을설정한다 102 -webkit-box-pack: 예전방식레이아웃상자의자식요소배치방법을설정한다 106 -webkit-flex: 유연한상자의레이아웃을적용한다 117 -webkit-flex-basis: 유연한상자의레이아웃기준을설정한다 122 -webkit-flex-direction: 유연한상자에서자식요소의배치방향과순서를변경한다 126 -webkit-flex-flow: -webkit-flex-direction 속성과 -webkit-flex-wrap 속성을하나로설정한다 132 -webkit-flex-grow: 유연한상자에서자식요소가부모요소에서맞춰늘어나게설정한다 139 -webkit-flex-shrink: 유연한상자에서자식요소가부모요소에맞춰줄어들게설정한다 142 -webkit-flex-wrap: 유연한상자에서줄바꿈을설정한다 146 -webkit-align-content: 유연한상자의자식요소를배치하는방법을설정한다 151 -webkit-align-items : 유연한상자의자식요소를정렬한다 162
-webkit-align-self: 유연한상자의자식요소를정렬한다 178 -webkit-justify-content: 유연한상자에서자식요소의정렬을변경한다 185 -webkit-order: 유연한상자에서자식요소의순서를지정한다 197 Part 4 Background 199 -webkit-background-clip: 배경을콘텐츠영역에만표시한다 201 -webkit-background-composite: 배경이미지와배경색을합성한다 204 -webkit-background-origin: background-position 속성이아닌다른속성으로배경의위치를변경한다 209 -webkit-background-size: 반응형웹에서자동으로배경이미지의크기를조절한다 213 Part 5 Box 225 -webkit-box-reflect: CSS 속성만으로반사효과를만든다 227 -webkit-box-shadow: CSS 속성으로그림자를넣는다 233 -webkit-box-sizing: 반응형웹에서요소의너비를측정하는기준을정의한다 238 Part 6 Border 241 -webkit-border-radius: CSS 속성만으로둥근모서리를만든다 243 -webkit-border-top-left-radius: CSS 속성만으로둥근모서리를만든다 250 -webkit-border-top-right-radius: CSS 속성만으로둥근모서리를만든다 252 -webkit-border-bottom-left-radius: CSS 속성만으로둥근모서리를만든다 254 -webkit-border-bottom-right-radius: CSS 속성만으로둥근모서리를만든다 256 -webkit-border-image: 이미지로테두리를만든다 258
Part 7 Table 265 -webkit-border-horizontal-spacing: 테이블에서셀의좌우여백을설정한다 267 -webkit-border-vertical-spacing: 테이블에서셀의위아래여백을설정한다 270 Part 8 Columns 275 -webkit-columns: 다단레이아웃을구현한다 277 -webkit-column-count: 다단레이아웃에서열개수를지정한다 283 -webkit-column-width: 다단레이아웃에서열의너비를설정한다 286 -webkit-column-gap: 다단레이아웃에서열사이간격을설정한다 289 -webkit-column-rule: 다단레이아웃에서열을구분하는선을설정한다 292 -webkit-column-rule-color: 다단레이아웃에서열을구분하는선의색깔을설정한다 295 -webkit-column-rule-style: 다단레이아웃에서열을구분하는선의스타일을설정한다 298 -webkit-column-rule-width: 애니메이션을설정한다 301 -webkit-column-break-after: 다단레이아웃에서요소다음에강제로단을나눈다 303 -webkit-column-break-before: 다단레이아웃에서요소앞에서강제로단을나눈다 307 -webkit-column-break-inside: 다단레이아웃에서요소의단을나누지않게설정한다 311 -webkit-column-fill: 다단레이아웃에서콘텐츠를채우는방법을설정한다 315 -webkit-column-span: 다단레이아웃에서요소가여러열에걸쳐나타나게한다 316
Part 9 Gradient 319 -webkit-linear-gradient: 선형그러데이션효과를적용한다 321 -webkit-radial-gradient: 방사형그러데이션효과를구현한다 330 -webkit-repeating-linear-gradient: 선형그러데이션패턴을만든다 338 -webkit-repeating-radial-gradient: 방사형그러데이션패턴을만든다 341 Part 10 Margin 345 -webkit-margin-collapse: 요소의여백병합방법을설정한다 347 -webkit-margin-top-collapse: 요소의위쪽여백병합방법을설정한다 351 -webkit-margin-bottom-collapse: 요소의아래여백병합방법을설정한다 356 Part 11 Marquee 361 -webkit-marquee: 전광판에글자가흘러가는듯한효과를구현한다 363 -webkit-marquee-direction: 마퀴효과의방향을지정한다 366 -webkit-marquee-increment: 마퀴효과의이동거리를지정한다 370 -webkit-marquee-repetition: 마퀴효과의이동횟수를지정한다 372 -webkit-marquee-speed: 마퀴효과의이동속도를지정한다 374 -webkit-marquee-style: 마퀴효과의이동스타일을지정한다 376
Part 12 Mask 381 -webkit-mask: 포토샵의마스크기능을 CSS로구현한다 383 -webkit-mask-attachment: 마스크영역이뷰포트보다클때스크롤여부를설정한다 388 -webkit-mask-box-image: 마스크효과를적용한다 393 -webkit-mask-clip: 마스크효과적용범위를지정한다 400 -webkit-mask-image: 마스크효과를적용할이미지를적용한다 405 -webkit-mask-origin: 마스크효과를적용할기준을설정한다 409 -webkit-mask-position: 마스크효과에서마스크이미지위치를설정한다 413 -webkit-mask-repeat: 마스크효과에서미스크이미지의반복여부를설정한다 416 -webkit-mask-size: 마스크효과에서마스크이미지의크기를설정한다 422 Part 13 3D 427 -webkit-perspective: 원근감을조절한다 429 -webkit-perspective-origin: 소실점의위치를변경한다 432 -webkit-transform: 요소의형태를변형한다 435 -webkit-transform-origin: 요소의형태를변형하는기준점을지정한다 441 -webkit-transform-origin-x: 요소를 X축으로변형할때 X축기준점을지정한다 444 -webkit-transform-origin-y: 요소를 Y축으로변형할때 Y축기준점을지정한다 447 -webkit-transform-origin-z: 요소를 Z축으로변형할때 Z축기준점을지정한다 450 -webkit-transform-style: 애니메이션요소를 3차원으로렌더링한다 455
Part 14 Text 459 -webkit-text-fill-color: 텍스트에색상을지정한다 461 -webkit-text-security: 입력하는문자를마스크문자로가린다 463 -webkit-text-size-adjust: 뷰포트에따라글자크기를변경한다 465 -webkit-text-stroke: 글자에윤곽선을그린다 469 -webkit-text-stroke-color: 글자윤곽선의색상을지정한다 471 -webkit-text-stroke-width: 글자윤곽선의너비를지정한다 472 Part 15 User 475 -webkit-user-drag: 요소를마우스로드래그할수있다 477 -webkit-user-modify: 요소안에있는텍스트를편집할수있다 481 -webkit-user-select: 콘텐츠를선택할수없게된다 485 Part 16 기타 487 -webkit-appearance: 폼요소의모양을바꾼다 489 -webkit-backface-visibility: 요소의뒷면을보여준다 492 -webkit-calc: CSS 속성으로사칙연산을한다 495 -webkit-cross-fade: 두이미지를합성한다 498 -webkit-filter: 포토샵의필터기능을 CSS로적용한다 501 -webkit-font-kerning: 인쇄에서적용하던커닝을웹에서적용한다 511 -webkit-nbsp-mode: 로줄바꿈을조정한다 514 -webkit-rtl-ordering: 텍스트렌더링방향을지정한다 517 -webkit-tap-highlight-color: 모바일브라우저에서링크요소를터치할때요소의색깔을지정한다 520
-webkit-touch-callout: 모바일브라우저에서요소를길게눌렀을때의동작을지정한다 524 -webkit-writing-mode: 글을쓰는방향을바꾼다 527 Part 17 부록 531 부록.1 길이단위 533 부록.2 색깔표기 533 부록.3 선모양표기 538 부록.4 선너비표기 540 부록.5 저자테스트리스트 541
Part 1 Animation
002 -
속성명 -webkit-animation 요약설명애니메이션을설정한다. 정의애니메이션이름과재생횟수, 재생방향등여러애니메이션속성을하나로합쳐서설정한다. 지원환경 15 이상 Animation 4.0 이상 2.0 이상 구문 -webkit-animation: <name> <duration> <timing-function> <delay> <iterationcount> <direction> <fill-mode> <play-state> [,]; name : 애니메이션이름. @-webkit-keyframes 속성에서설정한애니메이션의이름이다. 이름을설정해야애니메이션을재생할 수있다. duration : 애니메이션을한번재생하는데걸리는시간. 0: 애니메이션을재생하지않는다 ( 기본값 ). 숫자와단위 : 애니메이션을한번재생하는데걸리는시간이다. 초 (s) 와밀리초 (ms) 단위를사용한다. 단위가없거나값이음수면애니메이션을재생하지않는다. timing-function : 애니메이션의단계별재생속도. ease: 애니메이션이시작해서서히빨라지다중간부터다시서서히느려져종료된다 ( 기본값 ). ease-in: 애니메이션이시작해점점빨라진다. ease-out: 애니메이션이빨리시작되고점점느려진다. ease-in-out: 애니메이션이서서히시작하고서서히종료된다. 시작할때의속도는 ease-in 값을적용했을때와같고, 종료할때의속도는 ease-out 값을적용했을때와같다. linear: 애니메이션을처음부터끝까지일정한속도로재생한다. cubic-bezier(x1,y1,x2,y2): 큐빅베지어 cubic-bezier 곡선의좌표값을직접입력해애니메이션의단계별재생속도를설정한다. delay : 애니메이션시작을지연할시간. 0: 속성을적용하자마자애니메이션을시작한다 ( 기본값 ). now: 속성을적용하자마자애니메이션을시작한다. 0 으로설정한것과같다. ios 2.0 부터사용할수있다. 1 Animation - 003
숫자와단위 : 설정한시간이지난뒤에애니메이션을시작한다. 사용할수있는단위는초 (s) 와밀리초 (ms) 다. 값이양수면속성을적용한순간부터시간을계산해애니메이션재생을지연한다. 값이음수면속성을적용한순간바로애니메이션을실행하지만, 지정한시간이지난뒤의장면부터애니메이션을재생한다. 예를들어, 값이 -1s 면 1초가지난뒤의장면부터애니메이션을재생한다. iteration-count : 애니메이션을재생하는횟수. 숫자 : 설정한횟수만큼애니메이션을재생한다. 기본값은 1이다. 숫자가소수면애니메이션을재생하는도중에첫번째프레임으로돌아가멈춘다. 숫자가음수면애니메이션을재생하지않는다. infinite: 애니메이션을무한으로반복한다. direction : 애니메이션재생방향. @-webkit-keyframes 속성의 from에설정한스타일에서 to에설정한스타일로재생하는것이순방향이고, to에설정한스타일에서 from에설정한스타일로재생하는것이역방향이다. normal: 애니메이션을순방향으로재생한다 ( 기본값 ). 재생이한번끝나면첫번째프레임부터다시시작한다. alternate: 순방향으로애니메이션을시작해역방향과순방향으로번갈아애니메이션을재생한다. 홀수번째로재생할때는순방향으로재생하고, 짝수번째로재생할때는역방향으로재생한다. reverse: 애니메이션을역방향으로재생한다. 재생이한번끝나면마지막프레임부터다시시작한다. alternate-reverse: 역방향으로애니메이션을시작해순방향과역방향으로번갈아애니메이션을재생한다. 홀수번째로재생할때는역방향으로재생하고, 짝수번째로재생할때는순방향으로재생한다. fill-mode : 애니메이션재생의시작과끝에적용할스타일. none: 애니메이션을재생하기전이나재생한후에는요소에기본으로설정한스타일을적용한다 ( 기본값 ). 애니메이션효과는애니메이션에정의된시간동안만적용된다. forwards: 애니메이션재생이끝난뒤에마지막프레임에설정한스타일을적용한다. backwards: -webkit-animation-delay 속성으로애니메이션재생을지연하는동안에도첫번째프레임에설정한스타일을적용한다. both: -webkit-animation-delay 속성으로애니메이션재생을지연하는동안에도첫번째프레임에설정한스타일을적용하고, 애니메이션재생이끝난뒤에는마지막프레임에설정한스타일을적용한다. play-state : 애니메이션재생여부. running: 애니메이션을재생한다 ( 기본값 ). paused: 애니메이션을정지한다. 004 -
예제 다음코드는 -webkit-animation 속성을적용한예제다. 예제를실행하면 3 초동안꽃이미 지가한바퀴회전하는애니메이션이무한으로재생되도록 -webkit-animation 속성을설 정했다. Animation [ 예제 1-1] -webkit-animation 적용예제 <style>.flower { width: 100px; height: 100px; -webkit-animation: flower 3s linear infinite; @-webkit-keyframes flower{ 0%{ -webkit-transform:rotate(0deg); 100%{ -webkit-transform:rotate(360deg); </style> <div class="flower"> <img src="/img/flower.png" width ="100px" height ="100px" alt = " 꽃 "> </div> [ 그림 1-1] 무한으로회전하는꽃이미지 속성값을애니메이션이름 (flower) 과재생속도 (linear), 시간 (3s), 반복횟수 (infinite) 만적용 했지만실제브라우저는지연시간, 재생방향, 스타일, 재생여부를다음과같이기본값으로 적용된다. 1 Animation - 005
-webkit-animation: flower 3s linear 0s infinite normal none running; 다음링크와 QR 코드로 PC 와모바일에서예제를실행할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation 예제실행 QR 코드 006 -
속성명 -webkit-animation-delay 요약설명애니메이션에지연시간을설정한다. 정의애니메이션시작을얼마나지연할지설정한다. 지원환경 15 이상 Animation 4.0 이상 2.0 이상 구문 -webkit-animation-delay : <time>[,]; time : 애니메이션지연시간. 0: 속성을적용하자마자애니메이션을시작한다 ( 기본값 ). now: 속성을적용하자마자애니메이션을시작한다. 0으로설정한것과같다. ios 2.0부터사용할수있다. 숫자와단위 : 설정한시간이지난후애니메이션을시작한다. 사용할수있는단위는초 (s) 와밀리초 (ms) 다. 값이양수면속성을적용한순간부터시간을계산해애니메이션재생을지연한다. 값이음수면속성을적용한순간바로애니메이션을실행하지만지정한시간이지난후의장면부터애니메이션을재생한다. 예를들어, 값이 -1s 면 1초가지난후의장면부터애니메이션을재생한다. 예제다음코드는 -webkit-animation-delay 속성을적용한예제다. 이예제는요소를클릭하면지정된애니메이션을재생하도록스크립트가적용되어있다. -webkit-animation-delay 속성값을 0으로설정하면예제를실행하고사각형을클릭했을때사각형이화면왼쪽에서오른쪽으로이동하는애니메이션이바로재생된다. [ 예제 1-2] -webkit-animation-delay:0 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; 1 Animation - 007
-webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-delay: 0; @-webkit-keyframes test{ from { left: 100px; to { left: 300px; </style> <div> box </div> <script> $(document).ready(function() { $('div').click(function() { $(this).css('-webkit-animation-name', 'test'); ); ); </script> 다음은 [ 예제 1-2] 를실행해사각형이이동하는상태를시간의흐름에따라표현한그림이다. 사각형이왼쪽에서오른쪽으로 2 초동안이동한다. [ 그림 1-2] -webkit-animation-delay:0 실행화면 다음코드는 -webkit-animation-delay 속성값을 now로설정한예제다. 예제를실행하고사각형을클릭하면사각형이화면왼쪽에서오른쪽으로이동하는애니메이션이바로재생된다. [ 예제 1-3] -webkit-animation-delay:now 적용예제 <style> div { 008 -
-webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-delay: now; </style> Animation 다음코드는 -webkit-animation-delay 속성값을 2s로설정한예제다. 예제를실행하고사각형을클릭하면 2초후애니메이션이재생된다. [ 예제 1-4] -webkit-animation-delay:2s 적용예제 <style> div { -webkit-animation-name: test; -webkit-animation-duration: 2s; -webkit-animation-delay: 2s; </style> 다음코드는 -webkit-animation-delay 속성값을음수인 -1s로설정한예제다. 예제를실행하고사각형을클릭하면사각형이화면가운데에서부터오른쪽으로이동하는애니메이션이재생된다. 값을음수로설정했기때문에 1초가지난후인, 화면가운데위치의장면부터애니메이션이재생됐다. [ 예제 1-5] -webkit-animation-delay:-1s 적용예제 <style> div { -webkit-animation-name: test; -webkit-animation-duration: 2s; -webkit-animation-delay: -1s; </style> 1 Animation - 009
다음은 [ 예제 1-5] 을실행해사각형이이동하는상태를표현한그림이다. 애니메이션이재생 되고 1 초가지난위치에서부터사각형이이동하기시작한다. [ 그림 1-3] -webkit-animation-delay:-1s 실행화면 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-delay 예제실행 QR 코드 010 -
속성명 -webkit-animation-direction 요약설명애니메이션에재생방향을설정한다. 정의애니메이션의재생방향을설정한다. @-webkit-keyframes 속성의 from에설정한스타일에서 to에설정한스타일로재생하는것이순방향이고, to에설정한스타일에서 from에설정한스타일로재생하는것이역방향이다. Animation 지원환경 15 이상 4.0 이상 2.0 이상 구문 -webkit-animation-direction : <derection> [,]; direction : 애니메이션재생방향. normal: 애니메이션을순방향으로재생한다 ( 기본값 ). 재생이한번끝나면첫번째프레임부터다시시작한다. alternate: 순방향으로애니메이션을시작해역방향과순방향으로번갈아애니메이션을재생한다. 홀수번째로재생할때는순방향으로재생하고, 짝수번째로재생할때는역방향으로재생한다. reverse: 애니메이션을역방향으로재생한다. 재생이한번끝나면마지막프레임부터다시시작한다. alternate-reverse: 역방향으로애니메이션을시작해순방향과역방향으로번갈아애니메이션을재생한다. 홀수번째로재생할때는역방향으로재생하고, 짝수번째로재생할때는순방향으로재생한다. NOTE 애니메이션이역방향으로재생될때는 -webkit-animation-timing-function 속성과관련된효 과도반대로적용된다. 예를들어서서히시작했다빠르게종료하는 -webkit-animation-timingfunction:ease-in 을적용한애니메이션을역방향으로재생하면빠르게시작했다서서히종료하게된다. 예제다음코드는 -webkit-animation-direction 속성을적용한예제다. 이예제는요소를클릭하면지정된애니메이션을재생하도록스크립트가적용되어있다. 예제를실행하고사각형을클릭하면사각형이화면왼쪽에서오른쪽으로이동하는애니메이션이세번재생된다. -webkit-animation-direction 속성값을 normal로설정했기때문에한번재생이끝나면사각형이다시화면왼쪽에서오른쪽으로이동한다. 1 Animation - 011
[ 예제 1-6] -webkit-animation-direction:normal 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; -webkit-animation-name: test; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 3; -webkit-animation-timing-function :ease-in; -webkit-animation-direction: normal; @-webkit-keyframes test{ from { left: 100px; to { left: 300px; </style> <div> box </div> <script> $(document).ready(function() { $('div').click(function() { $(this).css('-webkit-animation-name', 'test'); ); ); </script> 다음코드는사각형에 -webkit-animation-direction:alternate 를설정한예제다. alternate 속성값은순방향으로애니메이션재생을시작해역방향과순방향으로방향을바 꿔가며애니메이션을재생한다. 예제를실행하고사각형을클릭하면처음에는사각형이순방 012 -
향인화면왼쪽에서오른쪽으로이동한다. 애니메이션이두번째로재생될때는사각형이역 방향인오른쪽에서왼쪽으로이동한다. 세번째로재생될때는다시순방향인왼쪽에서오른 쪽으로이동한다. [ 예제 1-7] -webkit-animation-direction:alternate 적용예제 Animation <style> div { -webkit-animation-iteration-count: 3; -webkit-animation-timing-function :ease-in; -webkit-animation-direction: alternate; </style> 다음코드는사각형에 -webkit-animation-direction:reverse를설정한예제다. -webkit-animation-direction 속성값을 reverse로설정했기때문에한번재생이끝나면사각형이다시화면오른쪽에서왼쪽으로이동한다. 예제를실행하고사각형을클릭하면사각형이화면오른쪽에서왼쪽으로이동하는애니메이션이세번재생된다. [ 예제 1-8] -webkit-animation-direction:reverse 적용예제 <style> div { -webkit-animation-iteration-count: 3; -webkit-animation-timing-function :ease-in; -webkit-animation-direction: reverse; </style> 다음코드는사각형에 -webkit-animation-direction:alternate-reverse를설정한예제다. alternate-reverse 속성값은역방향으로애니메이션재생을시작해순방향과역방향으로방향을바꿔가며애니메이션을재생한다. 예제를실행하고사각형을클릭하면처음에는사각형이역방향인화면오른쪽에서왼쪽으로이동한다. 애니메이션이두번째로재생될 1 Animation - 013
때는사각형이순방향인왼쪽에서오른쪽으로이동한다. 세번째로재생될때는다시역방향인오른쪽에서왼쪽으로이동한다. [ 예제 1-9] -webkit-animation-direction: alternate-reverse 적용예제 <style> div { -webkit-animation-iteration-count: 3; -webkit-animation-timing-function :ease-in; -webkit-animation-direction: alternate-reverse; </style> > 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-direction 예제실행 QR 코드 014 -
속성명 -webkit-animation-duration 요약설명애니메이션재생시간을설정한다. 정의 애니메이션을처음부터끝까지한번재생하는데걸리는시간을설정한다. @-webkitkeyframes 속성의 from 에설정한스타일에서 to 에설정한스타일로바뀌는데걸리는시간 이다. Animation 지원환경 15 이상 4.0 이상 2.0 이상 구문 -webkit-animation-duration: <time> [,]; time : 애니메이션을한번재생하는데걸리는시간. 0: 애니메이션을재생하지않는다 ( 기본값 ). 숫자와단위 : 애니메이션을한번재생하는데걸리는시간이다. 사용할수있는단위는초 (s) 와밀리초 (ms) 다. 단위가없거나값이음수면애니메이션을재생하지않는다. 예제다음코드는 -webkit-animation-duration 속성을적용한예제다. 이예제는요소를클릭하면지정된애니메이션을재생하도록스크립트가적용되어있다. 예제를실행하고사각형을클릭하면사각형이화면왼쪽에서오른쪽으로이동하도록애니메이션을설정했다. -webkitanimation-duration 속성값을 0으로설정했기때문에사각형을클릭해도애니메이션이재생되지않는다. 값을음수 (-2s) 로바꿔서설정해도애니메이션은재생되지않는다. [ 예제 1-10] -webkit-animation-duration:0 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; -webkit-animation-duration: 0; /* -webkit-animation-duration:-2s */ /* 값이음수여도애니메이션이재생되지않는다. 1 Animation - 015
*/ @-webkit-keyframes test{ from { left: 100px; to { left: 300px; </style> <div> box </div> <script> $(document).ready(function() { $('div').click(function() { $(this).css('-webkit-animation-name', 'test'); ); ); </script> 다음코드는 -webkit-animation-duration 속성의값을 2s로설정한예제다. 이예제를실행하고사각형을클릭하면, 사각형이 2초동안화면왼쪽에서오른쪽으로이동하는애니메이션이재생된다. [ 예제 1-11] -webkit-animation-duration:2s 적용예제 <style> div { color: #fff; -webkit-animation-duration: 2s; </style> 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-duration 예제실행 QR 코드 016 -
속성명 -webkit-animation-fill-mode 요약설명애니메이션시작과끝에스타일을설정한다. 정의 애니메이션의시작과끝에어떤스타일을적용할지설정한다. 애니메이션이어떻게나타나고어떻게사라질지효과를넣는속성이다. 예를들어 -webkit-animation-delay 속성으로애니메이션재생이지연되고있을때에는, 지연되는동안애니메이션의첫프레임에설정한스타일을볼수없다. 하지만 -webkit-animation-fill-mode 속성으로 backward나 both를설정하면지연시간에상관없이애니메이션의첫프레임에설정한스타일을볼수가있다. Animation 지원환경 15 이상 5.0 이상 4.0 이상 구문 -webkit-animation-fill-mode : <mode> [,]; mode : 애니메이션을재생할때시작과끝에적용할스타일의유형. none: 애니메이션을재생하기전이나재생한후에는요소에기본으로설정한스타일을적용한다 ( 기본값 ). 애니메이션효과는애니메이션에정의된시간동안만적용된다. forwards: 애니메이션재생이끝난후에마지막프레임에설정한스타일을적용한다. backwards: -webkit-animation-delay 속성으로애니메이션재생을지연하는동안에도첫번째프레임에설정한스타일을적용한다. both: -webkit-animation-delay 속성으로애니메이션재생을지연하는동안에도첫번째프레임에설정한스타일을적용하고, 애니메이션재생이끝난후에는마지막프레임에설정한스타일을적용한다. 예제다음코드는 -webkit-animation-fill-mode 속성을적용한예제다. 이예제는요소를클릭하면지정된애니메이션을재생하도록스크립트가적용되어있다. 사각형의기본스타일은배경색이검정색이지만애니메이션시작은흰색으로, 애니메이션종료는회색으로스타일을적용했다. 애니메이션에 1초의지연시간을적용한상태다. 예제를실행하고검정색사각형을클릭하면 1초후에사각형이화면왼쪽에서오른쪽으로이동하며배경색이흰색에서회색으로바뀐다. -webkit-animation-fill-mode 속성값을 none으로설정했기때문에애니메이션이지연되는동안흰색으로변화되는것은보이지않고기본스타일색인검정색으로유지되다지연이끝난후배경색이흰색에서회색으로바뀐다. 애니메이션이끝난후에는다시애니메이션을설정하기전상태로돌아온다. 1 Animation - 017
[ 예제 1-12] -webkit-animation-fill-mode:none 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: none; @-webkit-keyframes test{ from { left: 100px; background-color: #fff; to { left: 300px; background-color: #999; </style> <div> box </div> <script> $(document).ready(function() { $('div').click(function() { $(this).css('-webkit-animation-name', 'test'); ); ); </script> 다음은 [ 예제 1-12] 를실행해사각형의스타일이변화하는과정을단계별로표현한그림이다. 018 -
[ 그림 1-4] -webkit-animation-fill-mode:none 실행화면 Animation 애니메이션재생이지연되는동안에는기본스타일이적용되어사각형의배경색은검정색이다. 애니메이션이재생되면배경색은흰색이되고사각형이화면오른쪽으로이동한다. 사각형이이동하는동안배경색도흰색에서회색으로바뀐다. 애니메이션재생이끝나면다시기본스타일이적용되어사각형은화면왼쪽에위치하고배경색은검정색이된다. 다음코드는 -webkit-animation-fill-mode 속성값을 forwards로설정한예제다. 예제를실행하고애니메이션이끝나면마지막프레임의스타일이사각형에적용되어사각형이계속화면오른쪽에위치하고배경색도계속회색이된다. [ 예제 1-13] -webkit-animation-fill-mode:forwards 적용예제 <style> div { position: absolute; left: 100px; margin-left: -100px; background: #000; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: forwards; @-webkit-keyframes test{ from { left: 100px; background-color: #fff; to { left: 300px; background-color: #999; 1 Animation - 019
</style> 다음은 [ 예제 1-13] 을실행해사각형의스타일이변화하는과정을단계별로표현한그림 이다. [ 그림 1-5] -webkit-animation-fill-mode:forwards 실행화면 애니메이션재생이지연되는동안에는기본스타일이적용되어사각형의배경색은검정색이다. 애니메이션재생이시작되면배경색이흰색이되고사각형이화면오른쪽으로이동한다. 사각형이이동하는동안배경색이흰색에서회색으로바뀐다. 애니메이션재생이끝나면마지막프레임의스타일이적용되어사각형은화면오른쪽에위치하고배경색은회색이다. 다음코드는 -webkit-animation-fill-mode 속성값을 backwards로설정한예제다. 예제를실행하고사각형을클릭하면첫번째프레임의스타일이적용되어배경색이흰색인상태로애니메이션이지연된다. [ 예제 1-14] -webkit-animation-fill-mode:backwards 적용예제 <style> div { position: absolute; left: 100px; margin-left: -100px; background: #000; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: backwards; @-webkit-keyframes test{ from { left: 100px; 020 -
background-color: #fff; to { left: 300px; background-color: #999; </style> Animation 다음은 [ 예제 1-14] 를실행해사각형의스타일이변화하는과정을단계별로표현한그림이다. [ 그림 1-6] -webkit-animation-fill-mode:backwards 실행화면 사각형을클릭해애니메이션재생이지연되면첫번째프레임의스타일이적용되어사각형의배경색은흰색이된다. 애니메이션재생이시작되면사각형이화면오른쪽으로이동하면서배경색이회색으로바뀐다. 애니메이션재생이끝나면다시기본스타일이적용되어사각형은화면왼쪽에위치하고배경색은검정색이된다. 다음코드는 -webkit-animation-fill-mode 속성값을 both로설정한예제다. -webkitanimation-fill-mode 속성값을 both로설정하면값을 forwards로설정한효과와 backwards로설정한효과가모두적용된다. 예제를실행하고사각형을클릭하면첫번째프레임의스타일이적용되어배경색이흰색인상태로애니메이션이지연된다. 애니메이션재생이끝나면마지막프레임의스타일이적용되어사각형은화면오른쪽에위치하고배경색은회색이된다. 1 Animation - 021
[ 예제 1-15] -webkit-animation-fill-mode:both 적용예제 <style> div { position: absolute; left: 100px; margin-left: -100px; background: #000; -webkit-animation-delay: 1s; -webkit-animation-fill-mode: both; @-webkit-keyframes test{ from { left: 100px; background-color: #fff; to { left: 300px; background-color: #999; </style> 다음은 [ 예제 1-15] 를실행해사각형의스타일이변화하는과정을단계별로표현한그림 이다. [ 그림 1-7] -webkit-animation-fill-mode:both 실행화면 022 -
사각형을클릭해애니메이션재생이지연되면첫번째프레임의스타일이적용되어사각형의 배경색은흰색이된다. 애니메이션재생이시작되면사각형이화면오른쪽으로이동하면서배 경색이회색으로바뀐다. 애니메이션재생이끝나면마지막프레임의스타일이적용되어사각 형은화면오른쪽에위치하고배경색은회색이된다. Animation NOTE 안드로이드 4.0.3에서애니메이션이실행될때는깜빡임현상이나타난다. left나 top, width, height 등 CSS2 속성값을변경하는애니메이션이끝나고요소의기본속성으로돌아가는순간에깜빡인다. 애니메이션이적용되기전상태로돌아가지못하도록 -webkit-animation-fill-mode 속성에 forwards나 backwards, both 중아무값이나적용하면문제가해결된다. 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-fill-mode/ 예제실행 QR 코드 1 Animation - 023
속성명 webkit-animation-iteration-count 요약설명애니메이션을무한으로재생한다. 정의애니메이션을재생할횟수를설정한다. 지원환경 15 이상 4.0 이상 2.0 이상 구문 -webkit-animation-iteration-count : <number> [, ]; number : 애니메이션을재생하는횟수. 숫자 : 애니메이션을설정한횟수만큼재생한다 ( 기본값 : 1). 숫자가소수이면애니메이션을재생하는도중에첫번째프레임으로돌아가멈춘다. 숫자가음수이면한번만재생한다. infinite: 애니메이션을무한으로반복한다. 예제다음코드는 -webkit-animation-iteration-count 속성을적용한예제다. 이예제는요소를클릭하면지정된애니메이션을재생하도록스크립트가적용되어있다. 예제를실행하고사각형을클릭하면사각형이화면왼쪽에서오른쪽으로이동한다. -webkit-animationiteration-count 속성값을 1로설정했기때문에애니메이션은한번만재생된다. [ 예제 1-16] -webkit-animation-iteration-count :1 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; 024 -
@-webkit-keyframes test{ from { left: 100px; to { left: 300px; </style> <div> box </div> <script> $(document).ready(function() { $('div').click(function() { $(this).css('-webkit-animation-name', 'test'); ); ); </script> Animation 다음코드는 -webkit-animation-iteration-count 속성값을소수인 1.3으로설정한예제다. 예제를실행하고사각형을클릭하면애니메이션이한번재생된다음전체프레임의 3/10에해당하는프레임까지더재생되고애니메이션이끝난다. [ 예제 1-17] -webkit-animation-iteration-count :1.3 적용예제 <style> div { -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1.3; </style> 다음은 [ 예제 1-17] 을실행해사각형이이동하는상태를시간의흐름에따라표현한그림이 다. 전체프레임의 3/10 에해당하는프레임에서애니메이션이끝난다. 1 Animation - 025
[ 그림 1-8] -webkit-animation-interation-count :1.3 속성실행결과 다음코드는 -webkit-animation-iteration-count 속성값을 infinite로설정한예제다. 예제를실행하고사각형을클릭하면애니메이션이무한으로재생된다. [ 예제 1-18] -webkit-animation-iteration-count : infinite 적용예제 <style> div { -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; </style> 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-iteration-count 예제실행 QR 코드 026 -
속성명 -webkit-animation-name 요약설명 애니메이션이름을설정한다. 정의 재생할 @-webkit-keyframes 속성의이름을설정한다. 요소에적용할애니메이션을선택하 는데사용한다. 지원환경 15 이상 Animation 4.0 이상 2.0 이상 구문 -webkit-animation-name : <name> [,]; name : 애니메이션을식별하는문자열. none: 애니메이션을재생하지않는다. 값이 none이면 none이라는이름의 @-webkit-keyframes 속성이있어도애니메이션을재생하지않는다. 문자열 : 재생할애니메이션의이름이다. NOTE 유효한애니메이션이름과유효하지않은애니메이션이름 다음애니메이션이름은유효한값이다. -webkit-animation-name:name; -webkit-animation-name:_name; -webkit-animation-name:-name; // 문자열로시작하는이름 // 언더바 (_) 로시작하는이름 // 하이픈 (-) 으로시작하는이름 다음애니메이션이름은유효하지않은값이다. -webkit-animation-name:1name; -webkit-animation-name:@name; // 숫자로시작하는이름 // 특수문자로시작하는이름 예제다음코드는 -webkit-animation-name 속성을적용한예제다. @-webkit-keyframes 속성에설정한이름인 test를 -webkit-animation-name 속성값으로설정했다. 예제를실행하면 test 이름을갖는 @-webkit-keyframes을실행한다. 1 Animation - 027
[ 예제 1-19] -webkit-animation-name 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; -webkit-animation-name: test; -webkit-animation-duration: 2s; @-webkit-keyframes test{ from { left: 100px; to { left: 300px; </style> <div> box </div> 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-name 예제실행 QR 코드 028 -
속성명 -webkit-animation-play-state 요약설명애니메이션에정지와재생기능을추가한다. 정의애니메이션을재생하거나정지하도록설정한다. paused 값을적용하면재생중인애니메이션이정지된다. running 값을적용하면정지한애니메이션을다시재생한다. 애니메이션재생이멈추면그순간의상태를계속해서나타난다. 다시재생될때에도처음으로돌아가지않고정지된상태에서다시재생을시작한다. Animation 지원환경 15 이상 4.0 이상 2.0 이상 구문 -webkit-animation-play-state : <play_state> [,] play_state : 애니메이션재생여부. running: 애니메이션을재생한다 ( 기본값 ). paused: 애니메이션을정지한다. 예제다음코드는 -webkit-animation-play-state 속성을적용한예제다. 예제를실행하면사각형이화면왼쪽과오른쪽을무한으로반복하며이동한다. 멈춤버튼과재생버튼에는각각 -webkit-animation-play-state 속성을자바스크립트로적용한상태다. 멈춤버튼을클릭하면 -webkit-animation-play-state:paused를적용해애니메이션재생을정지한다. 재생버튼을클릭하면 -webkit-animation-play-state:running을적용해애니메이션을재생한다. [ 예제 1-20] -webkit-animation-play-state 속성활용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background-color: #000; color: #fff; 1 Animation - 029
-webkit-animation: test 2s linear infinite alternate; @-webkit-keyframes test{ from{ left:100px; to{ left:300px; </style> <button class="play"> 재생 </button> <button class="stop"> 멈춤 </button> <div> box </div> <script> $(document).ready(function() { $('.play').click(function() { // [ 재생 ] 버튼을클릭하면 -webkit-animation-play-state:running 속성적용 $('div').css( -webkit-animation-play-state, running ); ); $('.stop').click(function() { // [ 멈춤 ] 버튼을클릭하면 -webkit-animation-play-state:paused 속성적용 $('div').css( -webkit-animation-play-state, paused ); ); ); </script> 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-play-state 예제실행 QR 코드 030 -
속성명 -webkit-animation-timing-function 요약설명애니메이션재생속도를제어한다. 정의 애니메이션을재생하는동안단계별재생속도를설정한다. 애니메이션의프레임사이의재생속도를조절하는속성이며, 애니메이션의시작부분과종료부분에적용된다. 예를들어 -webkit-animation-timing-function:ease-in-out 속성은시작부분의재생속도를점점빠르게하고, 마지막부분의재생속도를점점느리게한다. Animation 지원환경 15 이상 4.0 이상 2.0 이상 구문 -webkit-animation-timing-function : <function> [,]; function : 애니메이션의단계별재생속도. ease: 애니메이션이서서히시작해빨라지다중간부터다시느려져서서히종료된다 ( 기본값 ). ease-in: 애니메이션이서서히시작해점점빨라진다. ease-out: 애니메이션이빠르게시작해점점느려진다. ease-in-out: 애니메이션이서서히시작하고서서히종료된다. 시작할때의속도는 ease-in 값을적용했을때와같고, 종료할때의속도는 ease-out 값을적용했을때와같다. linear: 처음부터끝까지애니메이션을일정한속도로재생한다. cubic-bezier(x1,y1,x2,y2): 큐빅베지어 cubic-bezier 곡선의좌표값을직접입력해애니메이션의단계별재생속도를설정한다. 큐빅베지어곡선 : 큐빅베지어곡선은네개의점으로정의되는 3차원곡선이다. 다음그림에서 X축은애니메이션재생시간을의미하고, Y축은진행정도를의미한다. P0은초기시간과초기애니메이션상태 ( 가속도 ) 를의미하며, P3는마지막시간과최종애니메이션상태 ( 가속도 ) 를의미한다. 이점은움직이지않으며고정이다. P1과 P2는큐빅베지어곡선을조절하는점 ( 핸들 ) 이다. P1은초기시간과초기애니메이션의곡선을만드는점으로 x1과 y1에설정하는좌표값이다. P2는마지막시간과최종애니메이션상태곡선을만드는점으로 x2와 y2 에설정하는좌표값이다. 1 Animation - 031
[ 그림 1-9] 큐빅베지어곡선 큐빅베지어값은보통 0 ~ 1 값이지만음수나 1 보다큰값도유효하다. 다음코드의경우유 효한값이다. cubic-bezier(0.1, 0.75, 1.0, 0.1) cubic-bezier(0, 0, 1, 1) cubic-bezier(0.1, -0.6, 0.2, -1) cubic-bezier(0.4, 1.5, 0.8, 5) // 0과 1 범위내소수점 // 정수 // y축의음수 // y축의 1.0보다큰값 잘못된큐빅베지어곡선값을설정하면기본값인 ease 가적용된다. -webkit-animation 속성에 [timing-function] 값을잘못지정하면 -webkit-animation 속성자체모두무 시하게된다. 다음코드의경우유효하지않은값이다. cubic-bezier(0, blue, 1,black) // 문자가들어간경우 cubic-bezier(0.3, 2.1) // 두개의값. 네개의값이어야한다. cubic-bezier(-1.4, 0.3, -0.5, 2.1) // x축의음수. x축은 0에서 1의범위에있어야한다. cubic-bezier(2.45, 0.6, 4, 0.1) // x축의 1.0 보다큰값. x축은 0에서 1의범위에있어야한다. 다음은 ease 값의가속도변화를큐빅베지어곡선으로표현한그림이다. [ 그림 1-10] ease 값의큐빅베지어곡선 : cubic-bezier(0.25, 0.1, 0.25, 1.0) 032 -
다음은 ease-in 값의가속도변화를큐빅베지어곡선으로표현한그림이다. [ 그림 1-11] ease-in 값의큐빅베지어곡선 : cubic-bezier(0.42, 0.0, 1.0, 1.0) Animation 다음은 ease-out 값의가속도변화를큐빅베지어곡선으로표현한그림이다. [ 그림 1-12] ease-out 값의큐빅베지어곡선 : cubic-bezier(0.42, 0.0, 0.58, 1.0) 다음은 ease-in-out 값의가속도변화를큐빅베지어곡선으로표현한그림이다. [ 그림 1-13] ease-in-out 값의큐빅베지어곡선 : cubic-bezier(0.0, 0.0, 0.58, 1.0) 다음은 linear 값의가속도변화를큐빅베지어곡선으로표현한그림이다. 1 Animation - 033
[ 그림 1-14] linear 값의큐빅베지어곡선 : cubic-bezier (0.0, 0.0, 1.0, 1.0) NOTE http://cubic-bezier.com/ 사이트에서는큐빅베지어곡선의점을직접움직여애니메이션진행속도를확인할수있다. 큐빅베지어곡선으로설정된애니메이션속도를 -webkit-animation-timing-function의속성값인 ease, ease-in, ease-out, ease-in-out, linear 등과비교할수도있다. 예제다음코드는 -webkit-animation-timing-function 속성을적용한예제다. 예제를실행하고사각형을클릭하면사각형이화면왼쪽에서오른쪽으로이동한다. -webkitanimation-timing-function 속성값을 linear로설정했기때문에사각형이처음부터끝까지일정한속도로이동한다. [ 예제 1-21] -webkit-animation-timing-function:linear 적용예제 <style> div { position: absolute; left: 100px; width: 100px; height: 50px; margin-left: -100px; background: #000; color: #fff; -webkit-animation-timing-function: linear; -webkit-animation-duration: 2s; @-webkit-keyframes test{ 034 -
from { left: 100px; to { left: 300px; </style> <div> box </div> <script> $(document).ready(function() { $('div').click(function() { $(this).css('-webkit-animation-name', 'test'); ); ); </script> Animation 다음은 [ 예제 1-21] 을실행해사각형이이동하는과정을시간의흐름에따라표현한그림이 다. 사각형이왼쪽에서오른쪽으로일정한속도로이동한다. [ 그림 1-15] -webkit-animation-timing-function:linear 속성실행화면 다음코드는 -webkit-animation-timing-function 속성값을 ease로설정한예제다. 예제를실행하고사각형을클릭하면사각형이천천히시작해빠르게이동한다. 중간부터다시속도가느려지면서애니메이션이천천히끝난다. [ 예제 1-22] -webkit-animation-timing-function:ease 적용예제 <style> div { -webkit-animation-timing-function: ease; -webkit-animation-duration: 2s; 1 Animation - 035
</style> 다음은 [ 예제 1-22] 를실행해사각형이이동하는과정을시간의흐름에따라표현한그림이 다. 천천히이동하기시작해빨라지다중간지점인 1 초부터다시느려져천천히끝난다. [ 그림 1-16] -webkit-animation-timing-function:ease 예제실행화면 다음코드는 -webkit-animation-timing-function 속성값을 ease-in으로설정한예제다. 예제를실행하고사각형을클릭하면사각형이천천히이동하다점점빨라진다. [ 예제 1-23] -webkit-animation-timing-function:ease-in 적용예제 <style> div { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 2s; </style> 다음은 [ 예제 1-23] 을실행해사각형이이동하는과정을시간의흐름에따라표현한그림이 다. 천천히이동하기시작해점점빨라진다. [ 그림 1-17] -webkit-animation-timing-function:ease-in 속성실행화면 다음코드는 -webkit-animation-timing-function 속성값을 ease-out 으로설정한예 제다. 예제를실행하고사각형을클릭하면사각형이빠르게이동하다점점느려진다. 036 -
[ 예제 1-24] -webkit-animation-timing-function:ease-out 적용예제 <style> div { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 2s; </style> Animation 다음은 [ 예제 1-24] 을실행해사각형이이동하는과정을시간의흐름에따라표현한그림이 다. 빠르게이동하다점점느려진다. [ 그림 1-18] -webkit-animation-timing-function:ease-out 속성실행화면 다음코드는 -webkit-animation-timing-function 속성값을 ease-in-out으로설정한예제다. 예제를실행하고사각형을클릭하면사각형이천천히이동하기시작하고천천히끝난다. [ 예제 1-25] -webkit-animation-timing-function:ease-in-out 적용예제 <style> div { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 2s; </style> 다음은 [ 예제 1-25] 를실행해사각형이이동하는과정을시간의흐름에따라표현한그림이 다. 천천히이동을시작해빨라지다천천히끝난다. 1 Animation - 037
[ 그림 1-19] -webkit-animation-timing-function:ease-in-out 속성실행화면 NOTE 참고. ease과 ease-in-out 비교다음링크와 QR 코드는 -webkit-animation-timing-function 속성값을 ease로설정했을때와 ease-in-out으로설정했을때이동속도를비교할수있는예제다. ease로설정했을때가 ease-in-out 으로설정했을때보다조금더빠르게시작하고중간부분부터느려지는것을확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-timing-function2 예제실행 QR 코드 다음코드는큐빅베지어곡선을설정해 -webkit-animation-timing-function 속성을적용한예제다. cubic-bezier(0,0,1,1) 로값을설정했기때문에 linear 값을설정한것과같이사각형이일정한속도로이동한다. [ 예제 1-26] -webkit-animation-timing-function: cubic-bezier(0,0,1,1) 적용예제 <style> div { -webkit-animation-timing-function: cubic-bezier(0,0,1,1); -webkit-animation-duration: 2s; </style> 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-animation-timing-function 예제실행 QR 코드 038 -
속성명 @-webkit-keyframes 요약설명스크립트없이애니메이션을재생한다. 정의애니메이션을재생할각프레임의스타일을설정한다. from 속성이나 0% 속성에설정한스타일에서출발해 to 속성이나 100% 속성에설정한스타일로점차바뀌면서애니메이션이재생된다. Animation 지원환경 15 이상 4.0 이상 참고 : 저자테스트에서사파리 5.1.7 과안드로이드일부버전에서프레임시간비율을퍼센트단위 (%) 로입력시적용되지않았다 ( 각속성별테스트결과는 " 부록.5 저자테스트리스트 " 를참고한다 ). 구문 @-webkit-keyframes <animationname>{ <keyframes-selector>{css-styles; animationname : 재생할애니메이션이름. 애니메이션을적용할요소의 -webkit-animation-name 속성값으로설정한다. keyframes-selector : 재생할프레임별시간비율. 0%: 애니메이션의시작프레임이다. 100%: 애니메이션의마지막프레임이다. from: 애니메이션의시작프레임이다. 0% 와같다. to: 애니메이션의마지막프레임이다. 100% 와같다. 0% 와 100% 사이에는여러개의중간값 (%) 을설정해프레임을넣을수있다. 다음코드는중 간값을넣어요소가위에서아래로이동하게하는예제다. @-webkit-keyframes mymove { 0% {top: 0px; 25%{top:20px; 75%{top:175px; 100%{top: 200px; 1 Animation - 039
예제다음코드는 @-webkit-keyframes 속성을적용한예제다. 예제를실행하면동그라미가화면위에서아래로이동한다. [ 예제 1-27] @-webkit-keyframes 속성적용예제 <style> div { position: relative; top: 0; width: 100px; height: 100px; border-radius: 50px; background: #000; -webkit-animation: mymove 2s; @-webkit-keyframes mymove { from { top: 0px; /* 애니메이션시작 */ to { top: 200px; /* 애니메이션끝 */ </style> <div></div> top:0 값에해당하는화면에서 top:200px 값에해당하는위치까지동그라미가내려온다. 다음링크와 QR 코드로 PC와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-keyframes 예제실행 QR 코드 앞의예제에 -webkit-animation 속성을함께적용해공이통통튀는애니메이션을만들어보겠다. 다음코드와같이 -webkit-animation-iteration-count 값과 -webkitanimation-timing-function 값, -webkit-animation-direction 값을추가해공이통통튀는효과를적용할수있다. -webkit-boder-radius 속성과 widht, height 속성을적절히이용하면공이땅에서튕길때찌그러지는효과도적용할수있다. 040 -
[ 예제 1-28] 공이튀는효과를구현한예제 <style> div { position: relative; top: 0; width: 100px; height: 100px; -webkit-border-radius: 50%; background: #000; -webkit-animation: ball 1s ease-in infinite alternate; @-webkit-keyframes ball { from { top: 0px; /* 애니메이션시작 */ to { top: 300px; width: 110px; height: 90px; /* 애니메이션끝 */ </style> <div></div> Animation 다음링크와 QR 코드로 PC 와모바일에서예제를확인할수있다. 예제실행 URL: http://jsbin.com/-webkit-keyframes-ball 예제실행 QR 코드 NOTE 공이튀는효과관련속성 -webkit-animation -webkit-animation-iteration-count -webkit-animation-timing-funtion -webkit-animation-direction 1 Animation - 041