Transform
-
rotate(각도) : 입력한 각도만큼 회전(음수도 가능, 평면적인 회전)
-
scale(2,3) : 숫자는 비율을 의미(width 2배, height 3배), 축소 시키고 싶을 땐 1보다 작은 소수점 사용
Ex)
-
skew(각도, 각도) : x축, y축을 기준으로 입력한 각도만큼 비틂
-
translate : 선택한 오브젝트의 좌표 변경
Ex)
-
prefix 접두사 : 다른 버전의 브라우저에서 실행을 원할 경우
Ex)
Transition
변화하는 과정을 보여주고자 할 때 사용
- property : 효과를 적용하고자 하는 css 속성
- duration : 효과가 나타나는데 걸리는 시간
Ex)
- timing-function : 효과의 속도(linear는 일정하게를 의미)
- delay : 시작하기 전 딜레이할 시간
Ex)
- 가상선택자: hover(css에서 미리 만들어 놓은 클래스 '마우스를 올렸을 때'라는 조건)
Ex)
transition이라고 하는 영역에 마우스를 올렸을 때 width 값이 300px로 바뀌면 좋겠다는 의미
- transition 종합
Ex)
먼저 나오는 숫자가 duration 뒤에 나오는 숫자가 delay(숫자가 하나인 경우엔 무조건 duration)
Animation
Ex)
-
name : 내가 만들 애니메이션의 이름 정의
-
iteration-count : 애니메이션 반복 횟수
-
direction : 애니메이션 진행 방향
alternate : from - to - from
normal : from - to, from - to
reverse : to - from, to - from -
@keyframes : 변화를 줄 실제 결과 값을 입력
Animation 응용
Ex)
- prefix 작성 시 유의 사항
Ex)
-prefix가 달려있는 animation 두 개를 작성했으면 prefix가 달려있는 keyframes도 두개를 작성해야함
-keyframes에 prefix가 달려있다고 안에 transform에 적용되는 것은 아니니 transform에도 prefix 달아줘야함
