인터넷 프로그래밍 #8-2 CSS3 - 변형과 애니메이션

인터넷 프로그래밍
8-2 CSS3 - 변형과 애니메이션

 

단원 목표

1. 변형함수를 나열하고 각각의 사용법 설명하기
2. 트랜지션의 속성을 나열하고 각각에 대해 설명하기
3. 애니메이션의 사용법에 대해 설명하기

 

 

변형함수(transform)

 

 

 

트랜지션(transition) 

 

속성

 

 

트랜지션의 실행형태

*ease가 default

 

애니메이션(Animation) 

 

속성

 

 

 

애니메이션 속성 한꺼번에 표시하기

 

***w3schools.com animation 연습문제 6개 풀어보기

 

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 간단정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

변형(transform) : x축과 y축으로 이동, 확대, 축소 회전 등 설정 가능
트랜지션(transition) : 지연시간, 실행시간, 적용대상, 실행형태
애니메이션(animation) : 애니메이션이 바뀌는 위치, 속성, 시작 밑 종료 시간, 방향, 횟수 등