Chapter09 CSS3 애니메이션 HTML5 Programming
Contents Chapter09 1. 트랜지션 2. 트랜스폼 3. 애니메이션 4. 미디어 쿼리 CSS3 애니메이션
트랜지션 트랜지션 단어가 의미하듯 어떠한 조건에 의해 다른 상태로 변화하는 것 브라우저 지원 현황 관련 속성 Chapter09 CSS3 애니메이션
요소의 변화 지정 트랜지션 속성 지정 어떠한 이벤트에 스타일의 변화를 줄 것인지 지정 Chapter09 트랜지션 속성 지정 어떠한 이벤트에 스타일의 변화를 줄 것인지 지정 변화를 주고자 하는 속성의 처음 상태와 최종 상태를 지정 transition 속성들을 사용하여 움직임의 속도나 딜레이 시간을 지정 가장 기본이 되는 것이 transition-property 속성과 transition-duration 속성 transition-property 속성은 변화시킬 속성의 이름을 값으로 갖음 transition-duration 속성은 지정한 속성의 스타일이 변화하기 시작하여 최종 상태로 변화하기까지의 시간을 값으로 갖음 CSS3 애니메이션
요소의 변화 지정 Chapter09 요소의 변화 지정 CSS3 애니메이션
변화 대기 시간 및 속도 지정 transition-delay 속성 transition-timing-function 속성 Chapter09 transition-delay 속성 스타일이 변화하기 전 대기 시간을 지정해야 할 경우 사용하며 값의 단위는 초를 사용 transition-timing-function 속성 변화하는 속도 조절 속성의 값 CSS3 애니메이션
변화 대기 시간 및 속도 지정 Chapter09 변화 대기 시간 및 속도 지정 CSS3 애니메이션
트랜지션 Chapter09 트랜지션 transition 속성을 사용하여 한번에 값을 지정할 수 있음 CSS3 애니메이션
프로그램 9-1 Chapter09 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <style type="text/css"> 05: div {width: 150px; height: 100px; 06: position: relative; left: 10px; 07: background: orange; 08: -webkit-transition-property: width, left, color; 09: -webkit-transition-duration: 2s, 2s, 2s; 10: -webkit-transition-timing-function: ease-in, linear, ease-in-out; 11: -webkit-transition-delay: 0s, 1s, 1s} 12: 13: div:active {width: 300px; 14: left: 200px; 15: background: red;} 16: </style> 17: </head> 18: <body> 19: <div> transition 속성 </div> 20: </body> 21: </html> CSS3 애니메이션
트랜스폼 트랜스폼 여러 요소를 회전시키거나 기울이는 등의 변형 작업 브라우저 지원 현황 관련 속성 Chapter09 CSS3 애니메이션
요소의 모양 변경 transform 속성 요소를 변형시키기 위해서 추가된 속성 Chapter09 transform 속성 요소를 변형시키기 위해서 추가된 속성 세부 기능 속성을 부여함으로써 요소를 특정 위치로 이동시키거나, 회전, 또는 기울임의 변형을 줄 수 있음 CSS3 애니메이션
요소의 모양 변경 Chapter09 transform 속성의 세부 속성 CSS3 애니메이션
요소의 모양 변경 translate 속성 scale 속성 Chapter09 translate 속성 요소를 가로와 세로로 이동하는 역할을 하며 값으로는 이동 좌표인 x, y값을 픽셀로 나타냄 scale 속성 요소의 너비와 높이를 변형시키는 역할을 함 CSS3 애니메이션
요소의 모양 변경 rotate 속성 skew 속성 요소를 회전시키는 역할scale 속성 Chapter09 rotate 속성 요소를 회전시키는 역할scale 속성 속성의 값으로는 각도의 단위인 deg(degree)를 사용하며 플러스 값은 시계 방향, 마이너스 값은 반시계 방향으로 회전 skew 속성 요소를 기울이는 역할 속성의 값으로는 각도의 단위인 deg를 값으로 사용하며 가로와 세로로 기울이는 값이 다를 수 있으므로 두 개의 값을 지정 CSS3 애니메이션
요소의 모양 변경 matrix 속성 한번에 6개의 값을 지정하여 사용 Chapter09 matrix 속성 한번에 6개의 값을 지정하여 사용 기본 값은 (1, 0, 0, 1, 0, 0)이며 matrix 속성을 사용하여 요소의 이동 및 크기 변형, 기울임 등을 한 번에 설정 CSS3 애니메이션
기준점 설정 transform-origin 속성 기준점 설정 Chapter09 transform-origin 속성 기준점 설정 X 좌표와 Y 좌표를 나타내는 두 개의 값을 가지며 기본 값은 50% 50% 매크로 값 CSS3 애니메이션
기준점 설정 Chapter09 transform-origin 속성 CSS3 애니메이션
프로그램 9-2 Chapter09 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <style type="text/css"> 05: .box1 {width: 100px; height: 100px; 06: background: gray; 07: -webkit-transform: matrix(2, 0.5, 0.5, 2, 100, 100);} 08: 09: .box2 {width: 100px; height: 100px; 10: background: gray; 11: -webkit-transform: translate(100px, 100px) 12: rotate(300deg) scale(2, 2); 13: -webkit-transform-origin: 0 0;} 14: </style> 15: </head> 16: <body> 17: <div class="box1"> box1 </div> 18: <div class="box2"> box2 </div> 19: </body> 20: </html> CSS3 애니메이션
애니메이션 Chapter09 animation 속성 움직임을 상세하게 제어 브라우저 지원 현황 관련 속성 CSS3 애니메이션
키 프레임 키 프레임 애니메이션을 구성하는 움직임의 키가 되는 프레임을 말하며 각 프레임을 연결함으로써 동작이 완성되는 것 Chapter09 키 프레임 애니메이션을 구성하는 움직임의 키가 되는 프레임을 말하며 각 프레임을 연결함으로써 동작이 완성되는 것 CSS3 애니메이션
키 프레임 키 프레임 키 프레임을 지정하기 위해서는 @keyframe 명령어를 사용하고 키 이름을 지정 Chapter09 키 프레임 키 프레임을 지정하기 위해서는 @keyframe 명령어를 사용하고 키 이름을 지정 시작 프레임을 지정하기 위하여 from 키 프레임을 사용하고 종료 프레임을 지정하기 위하여 to 프레임을 사용 CSS3 애니메이션
애니메이션 지정 Chapter09 애니메이션 지정 animation-name 속성값 지정 값은 키 프레임을 정의할 때 지정한 키 프레임 이름을 지정 animation-duration 속성값 지정 애니메이션이 실행되는 총 시간을 지정 animation-iteration-count 속성을 사용하여 애니메이션의 반복 횟수를 지정할 수 있는데 만일 계속 실행하고 싶으면 infinite 값을 지정 animation-direction 속성은 키 프레임의 진행 방향을 지정할 때 사용하는 속성으로 역방향으로 연결을 하고자 한다면 altermate값을 지정 animation-play-state 속성은 애니메이션의 실행 상태를 지정하는 속성으로 일시 정지, 재시작을 위하여 running 값과 paused 값을 지정 CSS3 애니메이션
애니메이션 지정 Chapter09 애니메이션 지정 CSS3 애니메이션
애니메이션 지정 Chapter09 animation 속성을 사용하여 한 번에 지정 CSS3 애니메이션
프로그램 9-3 Chapter09 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <style type="text/css"> 05: @-webkit-keyframes myAnimation { 06: 0% {width: 100px; left: 0px; background: orange;} 07: 30% {width: 150px; left: 50px; background: green;} 08: 50% {width: 200px; left: 100px; background: blue;} 09: 80% {width: 150px; left: 150px; background: green;} 10: 100% {width: 100px; left: 200px; background: blue;}} 11: 12: div {width:100px; height: 100px; 13: position:relative; 14: background: orange; 15: -webkit-animation-name: myAnimation; 16: -webkit-animation-duration: 3s; 17: -webkit-animation-delay: 0.5s; 18: -webkit-animation-timing-function: ease-in; 19: -webkit-animation-iteration-count: infinite; 20: -webkit-animation-direction: alternate;} 21: </style> 22: </head> 23: <body> 24: <div> Animation 속성 </div> 25: </body> 26: </html> CSS3 애니메이션
미디어 쿼리 미디어 쿼리 단말기의 종류에 따라 각각 다른 시트를 적용하게 하는 미디어 타입 개선 적용 방법 Chapter09 미디어 쿼리 단말기의 종류에 따라 각각 다른 시트를 적용하게 하는 미디어 타입 개선 적용 방법 link 요소를 사용하여 CSS 파일을 로드하는 방법 style 요소에 media를 선언하는 방법 CSS내에 @media를 사용하는 방법 브라우저 지원 현황 CSS3 애니메이션
미디어 쿼리 @media 방법 기본적으로 미디어 타입을 지정하며 and 연산자를 사용하여 조건을 추가 Chapter09 @media 방법 기본적으로 미디어 타입을 지정하며 and 연산자를 사용하여 조건을 추가 여러 개의 미디어 타입을 지정하기 위해서는 쉼표를 사용 CSS3 애니메이션
미디어 쿼리 Chapter09 미디어 타입의 종류 CSS3 애니메이션
미디어 쿼리 Chapter09 미디어 타입에 추가할 수 있는 조건의 종류 CSS3 애니메이션
미디어 쿼리 Chapter09 미디어 타입에 추가할 수 있는 조건의 종류 CSS3 애니메이션
미디어 쿼리 Chapter09 미디어 타입에 추가할 수 있는 조건의 종류 CSS3 애니메이션