29강
transform: 변형 시킨다.
요소에 이동, 회전, 확대, 축소, 비틀기 등 변형효과 줄 수 있다.
변환 함수(대상을 변화시켜주는 함수)를 속성값으로사용가능.뒤에 소괄호 가지는 함수.
transform: translate(x,y)
:요소의 좌표를 움직일 수 있음. 이 좌표에는 양수, 음수 둘 다 가능. x,y두개의 값이 아니라 하나의 값만 입력된경우에는 x와y의 값이 같다고 간주. 따라서 x축, y축 똑같이 이동.
transform: translateX(n)또는 transform: translateY(n)==>소괄호에는 내가 이동시킬 값을 입력.
:x축이나 Y축 하나만 변경할때 사용
transform: scale(x,y)
:1을 기준으로 몇배를 축소 혹은 확대하고싶은지==>대상의 크기 변환할 수 있다.
transform: scaleX(n) 또는
transform: scaleY(n)도 사용가능
transform: skew(x,y)==>기울이고 싶은 정도를 입력 몇도.
transform: skewX(각도deg),transform: skewY(각도deg)가능
transform: rotate(각도deg) ==> 지정한 각도만큼 회전. 방향은 시계방향. 반시계 방향을 원한다ㅏ면 음수값으로
30강
transform중첩적용.
변환함수 중첩적용가능.
translate주면서 동시에rotate를 쓰는 등 가능.
transform: rotate(75deg) translateY(120px)
=>75도 회전, y축 방향으로120px이동
transform: skew(30deg,10deg) rotate(45deg)
=>x축 방향으로 30도 y축 10도 기울이고 45도 회전
transform: scaleY(0.75) skewX(20deg)
32강
에니메이션 원리:
에니메이션??==>여러 연속되는 이미지를 연결해 자연스럽게 움직이는 것 처럼 만드는 법.
transition을 이용해 에니메이션을 만들어봤다.
transition속성활용,
animation속성과 keyframe을 활용
이렇게 두가지 방법이 있음.
transition==>전후 관계를 알 수 있는 이벤트가 있어야함.
animation==>시작하기위한 이벤트 필요 없음.
대신 @keyframes로 에니메이션을 정의 하고, 정의한 에니메이션을 불러와 제어해야함.
keyframe에는 에니메이션의 시작과 종료까지 정의
에니메이션으로 불러옴.
에니메이션을 사용하는것이 더 복잡하기에 기본적으로 transition을 이용. 그 안에서 해결 안되는 것은 animation과 keyframe이용
33강
@keyframes
==>css에니메이션의 시작, 중간, 끝 등의 중간상태 점의해줌
@keyframes 에니메이션 이름 { from{ 시작시점 css입력 } to { 끝지점 } }
from과 to 대신 진행도(%)표기 가능.
요소에 적용하려면 animation속성을 이용!!
34강
animation-name
animation-duration(걸리는 시간)
animation-direction
animation-iteration-count
animation-timing-function(속도)
animation-delay(지연)
animation-name==>어떠한 keyframes을 요소에 적용할 것인지 지정.(에니메이션 name에 들어가는 keyframes즉,keyframes 에 적용한 이름 말함.)
animation-duration(걸리는 시간)=>한번재생하는데 걸리는 시간. 기본적으로 transition-duration과 단위 같음
animation-direction==> 방향(정방향/역방향)
from-->to==> 정방향
to-->from ==>역방향
nomal==> 기본값으로 정방향으로 에니메이션 재생
reverse=>역방향 재생
alternate ==>nomal이랑 동일하게 정방향으로 재생되나, 반복하게 될 경우 정방향 역방향 번갈아가며 재생. 즉 첫재생을 정방향. 나머지는 번갈아
alternate-reverse==>reverse와 동일하게 역방향으로 재생되나, 반복시 역방향과 정방향 번갈아 재생
즉, 첫 재생이 역방향. 나머지는 번갈아/
animation-iteration-count ==>반복 횟수 지정
infinite==>무한히
기본값은 0.
구체적인 숫자 정수로 적어 정할 수 있음.
animation-delay(지연)==>지연시간 정함 s,ms
단축속성
animation: 에니메이션이름(name) 걸리는시간(duration) 속도(timing-function) 지연시간(delay) 반복횟수(iteration-count) 방향(direction)
