230409/ 스터디 7 일차 회고: CSS Animation

 

10주의 첫 주가 지나는 날입니다.

오늘은 스터디 관련한 행사는 없고, 그냥 css를 공부했습니다.

 

TIL

지식: transition

 

transition은 한국어로 이행, 전이, 변화 등의 뜻을 가지고 있습니다.

css의 transition은 html 요소 스타일이 변할 때,

지정한 시간 동안 부드럽게 변화하는 애니메이션 효과를 부여하기 위해 쓰입니다.

 

코드의 형태 

1. 적용 할 수 있는 상황

:focus와 같이 상태(state)에 따라 스타일을 지정하는
css 선택자가 있을때, 상태가없는 선택자에 적용 할 수 있습니다.

a {}
a:hover{}

a:hover와 같은 상태선택자가 따로 정의되어있을때 사용하며,
a 일반 선택자 내부에 들어가야합니다.


2. 코드의 형태
transition: 부위 시간 전환속도함수;

transition: all 1s ease-in-out;

 

예시코드

<!--a태그 스타일 설정-->
a {
color: white;
transition: all 1s ease-in-out
}

<!--a에 마우스를 올릴시 색상이 tomato로 변화합니다.-->
a:hover {
color:tomato;
}

위의 코드는 HTML 링크 태그에 마우스를 올릴 경우에,

색상이 tomato로 변화하는 코드입니다.

 

아래의 안녕하세요에 마우스를 올려보시면 1초 동안 서서히 색상이 변화하는 것을 볼 수 있습니다.

 

안녕

안녕하세요

 

 

ease-in-out은 전환속도에 관련한 애니메이션 함수입니다.

 

ease-in: 애니메이션 시작과 끝나는 부분에서 전환 속도가 빨라집니다.

ease-out: 위의 옵션과 반대로, 시작과 끝 부분에서 전환속도가 느려집니다.

ease-in-out: 시작이 빠르고 끝이 느리게 전환됩니다.

 

이것 말고도 cubic-bezier 등의 옵션이 있습니다. 

애니메이션 함수 살펴보는 사이트
https://matthewlein.com/tools/ceaser

 

 

 

지식: tranform

 

transform은 변화를 의미합니다.

변신자동차 나오는 "트랜스포머"의 그 트랜스 폼입니다.

 

화면에 표시되는 HTML디자인을 변화시킵니다.

*실제 box형태나 다른 주위 태그에 영향을 주진 않습니다.

 

위치, 크기, 방향, 등을 다양한 요소에, 

크기조정, 회전, 이동 등 다양한 효과를 줄 수 있습니다.

 

transition과 transform을 결합하면

상태변화가 이루어지는 과정을 보여줌으로써

아름다운 애니메이션을 만들 수 있습니다.

 

 

transform은 state 선택자 속성으로 사용됩니다.

 

예제코드

<!--a태그 스타일 설정-->
a {
color: white;
transition: all 1s ease-in-out
}

<!--a에 마우스를 올릴시 색상이 tomato로 변화합니다.-->
a:hover {
color:tomato;
transform: scaleY(2);
}

 

transition에 사용했던 예시에 tranform을 추가했습니다.

scaleY는 Y축(세로) 길이를 조절하는 함수입니다.

 

위의 코드는 Y축의 길이를 두배로 만들어줍니다.

아래의 안녕하세요에 마우스를 가져다 대면 확인할 수 있습니다.

 

안녕

안녕하세요

 

transform의 값이될수있는 함수는 아주 다양합니다.

transform으로 사용할 수 있는 함수를 살펴보는 사이트.
https://animista.net/

 

 

지식: keyframes

 

keyframes는 HTML태그의 상태와 관계없이,

영구적으로 보여줄 수 있는 애니메이션을 만들기 위해 사용하는 키워드입니다.

 

코드의 형태는 다음과 같습니다.

<!-이전상태와 이후상태만 나타내기-->
@keyframes 함수이름 {
from{}
to{}
}

<!--상태전환을 단계적으로 보여주고 싶을때-->

@keyframes changeColor {
  0% {
    background-color: tomato;
  }
  50% {
    background-color: teal;
  }
  100% {
    background-color: burlywood;
  }
}

 

위와 같이 함수를 정의하고 나서

원하는 곳에 animation 속성을 부여합니다.

 

animation 속성의 값으론 함수이름과 함수형태, 그리고 반복 횟수를 지정하면 됩니다.

<!--2초동안 ease-in-out모드로 애니메이션을 보여줍니다. 무한반복합니다-->
a {
animation: changeColor 2s ease-in-out infinite
}

 

 

읽어주셔서 무한 감사합니다.

오류나 오탈자가 있다면 댓글로 남겨주세요.