지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
Transitions을 활용하여
서서히 배경이 변화하는
방법에 대해
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 ( Transitions에 대해서 ) - 1편
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 원하는 색상을 CSS를 통해 표현하는 방법에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑
tm-csc.tistory.com
이번 글에서도 이어서
Transitions의
ease-in-function
에 대해서
알려드리겠습니다.
우선 VSC를 실행해주세요.
저번 글을 따라 해 보셨다면
ease-in-out을 적혀있을 텐데요.
저번 글에서는 정확히
이것이 무엇인지
알려드리지 않았습니다.
이건 바로
ease-in-function입니다.
브라우저에게 애니메이션이
어떻게 변할지 말해주는
코드라고 생각하시면 됩니다.
우선 linear은
무언가를 직선으로 움직이게
만들어줍니다.
갑자기 속도가 빨리 지거나
느려지는 일 없이 같은 속도로
좌우 직선으로 움직입니다.
ease-in은 그래프가
linear와 다르게 커브진 것을
확인할 수 있는데요.
초반의 속도가 느리다가
후반으로 갈수록 속도가
빨라지는 것을 확인할 수 있습니다.
이와 반대로
ease-out은
커브가 위쪽으로
올라가 있는데요.
초반에는 빠르지만
후반으로 갈수록 속도가
느려지는 것을 확인할 수 있습니다.
그리고 저번에
사용한 ease-in-out의
경우는 둘의 섞어 놓은
모양인 것을 확인할 수 있죠,
즉 초반에 느리다가
중반에 빨라지고 다시
후반에 느려지는 형태로
변하는 것을 확인할 수 있습니다.
또한 기본값 외에
cubic-bezier(0.785, 0.135, 0.150, 0.860);
을 사용하여 자신만의 속도를
설정할 수도 있습니다.
하지만 일반적으로는
기본적 값을 사용하실 겁니다.
이 자료는 아래 사이트에서
확인하면 실제로 어떻게 작동할지
미리 확인하고 실제로 내가 만들
사이트나 어플에 적용해본다면
더욱 좋을 거라고 생각합니다.
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
코딩은 항상 여러 번을
반복하며 자신의 것으로
만든다는 것을 잊지 마시고
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
