CSS(css와 애니메이션)

변형

변형(트랜스폼) = 특정 요소의 크기나 형태 등 스타일이 바뀌는 것

2차원 변형

-수평이나 수직으로 웹 요소 변형
-크기나 각도만 지정하면됨
-2차원 좌표 사용

3차원 변형

-x축과 y축에 원근감 추가
-z축은 앞뒤로 이동, 보는 사람 쪽으로 다가올 수록 값이 더 커짐

ftansform과 변형 함수

-웹 요소를 변형하려면 transform: 다음에 변형 함수를 함께 입력함
-구식 모던 브라우저까지 고려한다면 브라우저 접두사를 붙여야 함

<--기본형-->
fransform : 변형 함수;

translate 변형 함수 = 요소 이동시키기

-지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴
-2차원 3차원에서 모두 가능한 변형 함수

<--기본형-->
ftansform:translate(tx ,ty)
ftansform:translate3d(tx ,ty, tx)
ftansform:translateX(tx)
ftansform:translateY(ty)
ftansform:translateZ(tz)

scale 변형 함수 = 요소 확대/축소 하기

-지정한 크기만큼 요소를 확대, 축소

<--기본형-->
ftansform:scale(sx ,sy)
ftansform:scale3d(sx ,sy, sx)
ftansform:scaleX(sx)
ftansform:scaleY(sy)
ftansform:scaleZ(sz)

scale(.5): x축, y축 둘다 반으로 줄어듦
scale(.5,1): x축 반으로, y축 그대로
scaleX(2): x축 너비값 변경
scaleY(2): y축 세로값 변경

rotare 변형 함수 = 요소 회전하기

-각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전
-일반 각도나 래디안 값 사용(1래디안 = 1/180도)ㅓ

<--기본형-->
2차원 함수
ftansform:rotate(각도)

3차원 함수
ftansform:rotate(rx, ry, 각도)
ftansform:rotate3d(rx, ry, rx, 각도)
ftansform:rotateX(각도)
ftansform:rotateY(각도)
ftansform:rotateZ(각도)

skew 변형 함수 = 요소를 비틀어 왜곡하기

-요소를 지정한 각도만큼 비틀어 왜곡

<--기본형-->
ftansform:skew(ax ,ay)
ftansform:skewX(ax)
ftansform:skewY(ax)

변형과 관련된 속성들

ftansform-origin 속성 = 변형 기준점 설정하기

-특정 지점을 변형의 기준으로 설정

<--기본형-->
ftansform-origin : <x축> <y축> <z축> | initial | inheriit ;

perspective, perspective-origin 속성 = 원근감 표현하기

<--기본형-->
perspective : <크기> | nune ; 
-속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어짐

perspective-origin : <x축 값> | <y축 값> ; 
-입체적으로 표현할 요소의 아랫부분 위치 지정
-좀더 높은 곳에서 원근을 조절하는 득한 느낌을 갖게 함

ftansform-style 속성 = 3D 변형 적용하기

-부모 요소에 적용한 3D 변형을 하위 요소에도 적용

<--기본형-->
transform-style : flat | preserve-3d

flat = 하위 요소를 평면으로 처리한다
preserve-3ㅇ = 하위 요소들에 3d효과를 적용한다

backface-visibility 속성 = 요소의 뒷면 표시하기

<--기본형-->
backface-visibility : visible | hidden

visible = 뒷면을 표시함(기본 값)
hidden = 뒷면을 표시하지 않는다

트랜지션

-웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것

transition-property 속성 = 트랜지션을 적용할 속성 지정하기

-이 속성을 지정하지 않으면 모든 속성이 트랜지션 대상이 됨

<--기본형-->
transition-property : all | none | <속성 이름>

all = 요소의 모든 속성이 트랜지션 대상이 됨(기본 값)
none = 트랜지션 동안 아무 속성도 바뀌지 않는다
<속성 이름> = 트랜지션 효과를 적용할 속성 이름을 지정
            (예 - 배경 색만 바꿀 것인지, width 값을 바꿀 것인지 원하는 대상만 골라 지정할 수 있음,
            속성이 여러 개일 경우 쉼표(,)로 구분해 나열

transition-duration 속성 = 트랜지션 진행 시간 지정하기

-시간 단위는 초 또는 밀리초
-트랜지션이 여러 개라면 쉼표(,)로 구분해 진행 시간 지정

<--기본형-->
transition-duration : <시간>

transition-timing-function 속성 = 트랜지션 속도 곡선 지정하기

-트랜지션의 시작과 중간,끝에서의 속도 지정

<--기본형-->
transition-timing-function : <속성>

속성
linear = 시작부터 끝까지 똑같은 속도로 트랜지션을 진행
ease = 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다(기본 값)
ease-in = 시작을 느리게 한다
ease-out = 느리게 끝낸다
ease-in-out = 느리게 시작하고 느리게 끝낸다
cubic-bezier(n,n,n,n) = 배지에 함수를 직접 정의해 사용(n = 0~9)

transition-delay 속성 = 지연 시간 설정하기

-시간 단위는 초 또는 밀리초 기본값 = 0

<--기본형-->
transition-delay : <시간>

transition 속성 = 트랜지션 속성 한꺼번에 표기하기

<--기본형-->
transition : <transition-property 값> | <transition-duration 값> | timing-function | <transition-delay 값>

-속성 값의 나열 순서는 위에 순서를 따라야 하며 4개의 속성 중 빠진 것이 있다면 그 속성은 기본 값

애니메이션

-애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다
=키프레임 = 애니메이션 중간에 스타일이 바뀌는 지점

@keyframes 속성 = 애니메이션 지점 설정하기

-애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정
-'이름'으로 애니메이션 구별

<--기본형-->
@keyframes <이름> {
    <선택자> { <스타일> }
    }

-시작 위치는 0%, 끝 위치는 100%로 놓고 위치 지정
-시작과 끝 위치만 사용한다면 form, to 키워드 사용가능

animation-name 속성 = 애니메이션 이름 지정하기

-@keyframes 속성에서 만든 애니메이션 이름을 사용

<--기본형-->
animation-name : <키프레임 이름> | none

enimation-duration 속성 = 애니메이션 실행 시간 설정하기

-애니메이션 실행 시간 설정 기본값 0
-사용 가능한 값은 초나 밀리초

<--기본형-->
animation-duration : <시간>

animation-direction 속성 = 애니메이션 방향 지정하기

-애니메이션이 끝난 후 원래 위치로 돌아가거나 반대 방향으로 애니메이션 실행하도록 지정

<--기본형-->
animation-direction : normal | alternate

narmal = 애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아간다(기본 값)
alternate = 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행

animation-iteration-count 속성 = 반복 횟수 지정하기

<--기본형-->
animation-iteration-count : <숫자> | infinite

<숫자> = 입력한 숫자만큼 반복(기본 값 = 1)
infinite = 무한 반복

animation-timing-function 속성 = 애니메이션 속도 곡선 지정하기

<--기본형-->
animation-timing-function : <속성>

속성
linear = 시작부터 끝까지 똑같은 속도로 트랜지션을 진행
ease = 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝낸다(기본 값)
ease-in = 시작을 느리게 한다
ease-out = 느리게 끝낸다
ease-in-out = 느리게 시작하고 느리게 끝낸다
cubic-bezier(n,n,n,n) = 배지에 함수를 직접 정의해 사용(n = 0~9)

animation 속성 = 애니메이션 관련 속성 한꺼번에 표기하기

-여러 개의 애니메이션 속성을 하나의 속성으로 줄여서 사용
-지정하지 않은 속성은 기본 값, animation-duration 속성 값은 반드시 지정

<--기본형-->
animation : <animation-name> | <enimation-duration> |
            <animation-timing-function> | <enimation-delay> |
            <animation-iteration-count> | <animation-direction >