오늘도 어김없이 미니 팀 프로젝트 작업을 하면서
갑자기 머릿 속을 슥 지나가는 생각이 있었습니다.
"페이지가 너무 밋밋한데 페이지가 켜질 때 효과 같은걸 넣어볼까?"
하면서 빠르게 css 애니메이션 효과에 대해 검색을 한 결과
굉장히 쉬우면서도 간편한 @keyframes 라는 키워드를 찾았습니다!!
예를 들어 keyframes를 사용 안 한 코드로 페이지를 작동시켜보면?
페이지는 정상으로 잘 켜지나 뭔가 등장 효과도 없고 밋밋~..하죠?
이럴 때 써주는 게 바로 @keyframes 입니다.
style 부분에 @keyframes를 쳐주신 후 애니메이션을 떨구는 걸 적용하고 싶다
하시면 떨구는 영단어 drop을 적으시면 되고 뭐 옆으로 미는 애니메이션을 하고 싶다 하시면 보기 편하게 slide (아무렇게 하셔도 상관없다만 나중에 알아보기 쉽게 하기 위해서!) 쓰신 다음엔 이제 이 keyframes drop{} 안에 어디에서 시작해서 어디로 가는지 방향을 정해줘야겠죠?
그래서 from{}, to{}를 아래처럼 작성해 주시면 됩니다!
@keyframes drop {
from {
transform:translateY(-90%)
}
to {
transform:translateY(0%)
}
}
이 코드를 보시고 궁금하신 점이 생기셨을 텐데요.
transform < 얘는 도대체 뭐냐?? 물으신다면 트랜스폼은 아시다시피 변형의 의미를 갖고 있습니다. 맞습니다 얘는 요소의 크기나 어떠한 형태, 위치를 바꿔주는 함수입니다!
그럼 그 뒤에 붙은 translateY() < 얘는 또 뭔데? 라고 생각하실텐데요
이 친구는 translate 변형 함수라고 불리고 요소의 위치를 이동시켜줍니다.
예를 들어
transform: translateX()
transform: translateY()
얘네 둘의 뜻은, X를 ()크기 만큼 움직여줘, Y를 ()크기만큼 움직여줘~ 라는 뜻입니다.
그래서 제가 원하고자 하는 위에서 떨어지는 애니메이션을 주고 싶을 땐
@keyframes 명령어의 from, to에 transform: tranlateY()를 사용한 겁니다.
자 그럼 from에서 translateY(-90%)를 작성하고 to에는 translate(0%)를 작성하면 어떻게 될까요?
어라 이상하다 분명 알려준 keyframes도 썼고 transform, transformY()도
썼는데 왜 아무런 반응이 없지?? 라고 생각하신다면 정상입니다.
왜냐하면 style 멤버 프로필 카드 부분에 따로 애니메이션을 준 게 없거든요
사실 keyframes만 셋팅해 두면 그 후로는 자신이 애니메이션을 주고 싶은 class에 animation만 추가해 주면 끝입니다.
예를 들어 class가 div인 곳에 애니메이션을 주고 싶다 하면
.div {
animation: drop 1.5s ease;
}
이게 끝입니다 animation: 첫 번째로 들어온 drop은 저희가 위에서 keyframes에 적어둔 떨군다는 뜻을 가진 drop을 그대로 가져온 것이고, 그 뒤에 1.5s는
변화 시간(transition-duration)을 가리킵니다.말그대로 1.5초에
걸쳐서 보이게 해줘~ 라는 뜻입니다. 3s를 적는다면 3초에 걸쳐 떨어지는 애니메이션이 실행되겠죠?
뒤에 붙은 ease는 변화 속도(transition-timing-fuction)입니다. 애니메이션을 부드럽게 마무리해준다 라고 생각하시면 편한데 좀 더 직관적으로 보여드릴만한 표가 있습니다. 
이 표를 보시면 좀 확연히 와닿으시죠? 가로축이 시간, 세로축이 결과값입니다.
ease: 천천히 > 빠르게 > 천천히
ease-in: 보통 속도 > 빠르게
ease-out: 보통 속도 > 느리게
ease-in-out: 천천히 > 빠르게 > 천천히 (ease와 그래프 모양은 같음, 그러나 기울기 변화 속도는 다름!)
그럼 제가 애니메이션 효과를 주고 싶었던 왼, 오른쪽 박스에 효과를 넣어보겠습니다.
드디어 밋밋하지 않은 등장 애니메이션을 볼 수가 있습니다~
오늘도 보람찬 하루를 끝마치며
코딩하면서 궁금한 게 많아지고 욕심이 생기는 건 정말 좋은 현상인 거 같습니다!!..
하나하나 알아갈수록 뭔가 머리에 전구가 켜지는 듯한 느낌이랄까요ㅋㅋㅋㅋ
오늘 하루도 0.1% 성장했습니다 휴.. 읽어주셔서 감사합니다.
