.jpg)
모던웹을 위한 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: 수치변형 함수 지정
