[TIL] 01주차-03

1. Transfrom

웹사이트에 특정 요소에 각도를 틀거나 배율을 바꿀 때 사용합니다..

rotate - Ex) transform: rotate(45deg)

입력한 각도만큼 회전 음수도 입력이 가능하다.

scale(x, y) - Ex) transform: scale(2, 3)

숫자는 비율을 의미 width를 x만큼, height를 y만큼 확대

skew(10deg, 20deg) - Ex) transform: skew(10deg, 20deg)

x축 y축을 기준으로 입력한 각도만큼 비틂 Ex)

translate(100px, 200px) - Ex) transform: translate(100px, 200px)

선택한 오브젝트의 좌표 변경

prefix 접두사 - Ex) -webkit-transform: translate(100px, 200px)

최신 버전이 아닌 다른 버전의 브라우저에서 실행을 원할 경우에 사용한다. 브라우저 마다 사용하는 접두사가 다릅니다.

Ex) -webkit-(크롬, 사파리), -moz-(파이어폭스), -ms-(익플 9.0), -o-(오페라)

2. Transition

요소가 변할 때 자연스러운 변화를 주고싶을 때 사용합니다.

property - Ex) transition-property: width, transition-property: backgrouns-color

효과를 적용하고자 하는 CSS 속성

duration - Ex) transition-duration: 2s

효과가 나타나는데 걸리는 시간

timing-function - Ex) transition-timing-function: linear

효과의 속도 linear는 일정하게라는 의미

delay - Ex) transition-delay: 1s

특정 조건 하에서 효과 발동 예시는 1초 후 라는 의미

all - transition: all 1s;

요소에 대부분에 적용하겠다는 명령어 width, height 등

종합

Ex) transition: width 2s linear 2s; - 1초 후에 width값이 2초 동안 속도 일정하게
※숫자가 하나면 무조건 duration, 숫자가 2개면 앞에 duration 뒤에 delay

hover

CSS에서 미리 만들어 놓은 클래스 [마우스를 올렸을 때] 라는 조건

3. Animation

hover는 마우스를 올렸을 때라는 조건이 있지만 Animation은 사이트에 접속하면 발생한다.

name - Ex) animation-name: animation

애니메이션에 이름 임의로 작성가능

iteration-count - Ex) animation-iteration-count: 6

애니메이션 반복 횟수

direction - Ex) animation-direction: alternate

애니메이션 진행 방향
● alternate: 시작 -> 끝 -> 시작 (반복)
● normal: 시작 -> 끝
● reverse: 끝 -> 시작

@keyframes - Ex) @keyframes 애니메이션이름

애니메이션을 작성할 때 꼭 따라와줘야 하는 요소 실제로 변하는 애니메이션에 결과값

@keyframes animation{
from { width: 300px; }
to { width: 600; }
}
※from은 시작, to는 끝

4. Transform & Animation

animation: rotation(name) 1500ms(duration) linear(속도) infinite(반복) alternate(방향);
@keyframes rotation{
	from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

만약 @keyframes에 prefix를 달았으면 from과 to 괄호 안에도 prefix를 넣어야 한다.