키프레임 애니메이션에 대해 알아보자

키프레임 애니메이션에 대해 알아보자

CSS 키프레임 애니메이션은 CSS(Cascading Style Sheets)를 사용하여 웹페이지에서 애니메이션을 구현하는 기술입니다. 이를 통해 HTML 요소에 다양한 애니메이션 효과를 적용할 수 있습니다.

CSS 키프레임 애니메이션을 구현하려면 @keyframes 규칙을 사용합니다. @keyframes 규칙은 애니메이션의 키프레임(시작과 끝 상태)을 정의하는 역할을 합니다. 각 키프레임에서는 원하는 스타일을 지정하고, 애니메이션의 지속 시간 및 타이밍 함수를 설정할 수 있습니다.

 

키프레임 (keyframes) 애니메이션을 적용하기 앞서

애니메이션 효과과 css 상에 아래와 같이 정의가 되어야 하며, 스크롤에 따른 제어는 자바스크립트를 사용하여 제어 합니다.

animation_object{
font-size:3rem;
witdth:300px;
color: white;
font-family:sans-serif;
position: absolute;
top:100px;
left:400px;
animation: slide-object 1s ease-out;
}

@keyframes slide-object{
form{
left:-100px;
opacity:0;
}
to{
left:400px;
opacity:1;
}
}

@keyframes slide-object-hidden{
form{
left:400px;
opacity:1;
}
to{
left:-100px;
opacity:0;
}
}

위에 키프레임에 대한 모션의 정의한후 (두가지 나타 날때, 사라질때) 자바스크립트로 해당 부분을 아래와 같이 제어하게 된다.

let ani-object = document.querySelector("animation-object");

window.addEventListener("scroll", function () {
let value = window.scrolly;
if(value > 300){
ani-object.style.animation="slide-object-hidden 1s ease-out forwards;
}else{
ani-object.style.animation='slide-object 1s ease-out';
}
});

위의 형태로 스크롤위치에 따른 제어가 가능합니다.