CSS3_변형과 애니메이션

4234 단어 CSS3CSS3

모던웹을 위한 HTML5+CSS3바이블 3판 교재

chapter9. 변형과 애니메이션

이벤트(Event)

-사건(=사용자가 클릭,스크롤,필드 내용 변경 을 했을 '때'와 같은 것을 의미

ex) 메뉴에 클릭 이벤트 발생시 탭 나타남.(click)

<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert(window.location)" value="alert(window.href)" />
<input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>

변형속성(Transition)

-변형속성 이벤트 발생시 어떤 방식으로 변형이 되는지 지정하는 기능 (시간,형태,반복등)

transition: 모든 transition속성을 한 번에 사용.
transition-delay: 이벤트 발생 후 몇 초 후에 재생할지 지정합니다.
transition-duration: 몇 초 동안 재생할지 지정합니다.
transition-property: 어떤 속성을 변형할지 지정합니다.
transition-timing-function: 수치 변형 함수를 지정합니다.

ex) 예제 코드
http://127.0.0.1:5500/study/HTML/chapter9/transition_sucess%20.html

->수치 변형(cubic-bezier)
참고사이트: https://cubic-bezier.com/#.17,.67,.83,.67

키 프레임과 애니메이션 속성

애니메이션 속성

-해당 이벤트가 시작되었을때 애니매이션이 어떤방식으로 변하는지 지정하는 기능
-시간, 형태, 반복 등 다양하게 지정가능하다
-키 프레임(@keyframe): 애니매이션 이름을 지정하기 위해 이용하는 것(규칙)

animation: 모든 애니메이션 속성 한번에 적용
animation-delay: 이벤트 발생후 몇초후에 재생할지 지정
animation-direction: 애니메이션 지정 방향
->alternate: from에서 to로 이동후 to에서 from으로 이동 반복.
->normal: 계속 from에서 to로 이동한다.
animation-duration: 애니메이션 몇초동안 재생할지
animation-iteration-count: 애니메이션 특정 반복 횟수지정
animation-name: 애니메이션 이름지정
animation-play-state: 애니메이션 재생 상태 지정
animation-timing-function: 수치변형 함수 지정

ex) 예제 코드
http://127.0.0.1:5500/study/HTML/chapter9/%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%86%8D%EC%84%B1%20copy.html

좋은 웹페이지 즐겨찾기