[CSS] 웹 프로젝트 9일차! (animation)

오늘은 여러 state 속성에 대해 공부했다.

active, hover, focus, focus-within, visited ~~

그리고 드디어.. 애니메이션 효과를 넣는 방법을 배웠다.

animation 적용한 rotoma.img

 state)

- active

-> 해당 요소를 마우스로 클릭했을 때 지정한 효과를 적용한다.

- hover

-> 마우스가 해당 요소 위를 지나갈 때 지정한 효과를 적용한다.

- focus

-> 키보드로 선택되었을 때 지정한 효과를 적용한다.

- focus-within

-> 부모 요소에게 적용하며, 자신의 자식 요소 중 하나가 focused 되었을 때 지정한 효과를 적용한다.

- visited

링크를 걸어 두었을 때, 이미 방문한 사이트일 경우에 효과를 적용한다.

 

추가적으로 조건을 나열해 여러 상황을 설정할 수도 있다!!

ex) high-tag:hover low-tag:focus{  }

-> 이 경우, 상위 요소위에 마우스 커서가 있고, 하위 요소가 키보드로 선태되었을 대 효과를 적용한다.

and와 비슷한 개념이라고 이해하면 된다!!

 

애니메이션)

기본적인 코드)

@keyframes 애니메이션 이름 {
from{
}
to {
}
}

from to 대신 0% ~ 100% 를 사용할 수 있다.

무한으로 반복되게 하려면 뒤에 infinite를 붙여준다.

transition)

element가 어떤 상태에서 다른 상태로의 "변화!!!!"를 보여주는 애니메이션이다.

transition에는 두 가지 규칙을 꼭 기억해야 한다!

1) transition은 state가 없는!!! 요소에 사용해야한다.

2) transition 속성 자체가 어떤 변화를 주는 것이 아닌 변화를 애니메이션화 하는 것이기 때문에

    요소에 변화 값(state)를 설정하고 나서 transition으로 어떻게 애니메이션을 입힐 것인지 설정해야한다!

 

문법 : transition: 선택자 지속시간 속성;

ex) transition: all 3s ease-in-out; 이런식으로 사용되며 전체적인 코드로 적용했을 땐 아래처럼 적용한다.

ease-in-function: )

-> 브라우저에게 변화하는 방법을 알려주는 역할을 한다.

- linear

-> 변화 그래프가 직선

- ease-in

-> 시작과끝이 빠름

- ease-out

-> 시작과 끝이 느림

- ease-in-out

-> 시작이 빠르고 끝이 느림

- all

-> 변화 요소를 한 번에 다룬다.

 

transformation)

한 요소를 말 그대로 변형시킬 수 있기 때문에 애니메이션 효과를 넣을 때 굉장히 많이 쓰인다.

3D까지 할 수 있기 때문에 진짜 활용도 짱이다!

그렇다면 어떤 기능이 있을지 살펴보도록 하자!

아! 그전에 transformation의 주요 특징부터 살펴보자.

우선, transformation은 box element를 변형시키지 않는다.

즉, 옆에 sibling들에게 영향을 끼치지 않는다. 

또, margin, padding 이 적용되지 않는다. 

 

- translate( x축 거리, y축 거리 )

- translateX( x축 거리 )

- translateY( y축 거리 )

-> x축 거리와 y축 거리만큼 요소를 이동시킨다.

 

- scale( 가로길이에 곱하는 수, 세로길이에 곱하는 수 )

- scaleX( 가로길이에 곱하는 수 )

- scaleY( 세로길이에 곱하는 수 )

-> 크기를 배수에 맞게 조정한다

 

- rotate( 각도 )

-> 요소를 주어진 각도만큼 시계방향으로 회전한다.

 

ex) transform: rotateX(90deg) scale(0.5);

적용예시)