이런 애니메이션은 어떻게 만들어야 할까요??

[김철준]

 

왼쪽 화살표 버튼은 무시해주셔도 되고, 하트가 곡선을 그리면서 위로 날아가는 애니메이션인데 곡선이 너무 어렵습니다. 제가 이렇게 짜봤는데 뚝뚝 움직이네요 ㄷㄷ

 

.test{
margin: 0 auto;
width: 50px;
height: 50px;
border: 2px solid red;
background-color: #000;

animation-name: test;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@keyframes test {
from{
transform: rotate(0) translateX(0) translateY(0);
}
25%{
transform: rotate(0) translateX(20px) translateY(10px);

}
50%{
transform: rotate(0) translateX(0) translateY(20px);

}
75%{
transform: rotate(0) translateX(20px) translateY(30px);

}
to{
transform: rotate(0) translateX(0) translateY(40px);
}
}

[김철준]

.test{
margin: 0 auto;
width: 50px;
height: 50px;
border: 2px solid red;
background-color: rgba(0,0,0,1);

animation-name: test;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function:linear;
}

@keyframes test {
from{
transform: rotate(-8deg) translateX(-50px) translateY(0);
background-color: rgba(0,0,0,1);
}
25%{
transform: rotate(8deg) translateX(50px) translateY(20px);
background-color: rgba(0,0,0,.8);

}
50%{
transform: rotate(-8deg) translateX(-50px) translateY(40px);
background-color: rgba(0,0,0,.6);

}
75%{
transform: rotate(8deg) translateX(50px) translateY(60px);
background-color: rgba(0,0,0,.5);

}
to{
transform: rotate(-8deg) translateX(-50px) translateY(80px);
background-color: rgba(0,0,0,.2);

}
}

 

이렇게 바꿔봤더니 좀 개선은 됐는데 그래도 뚝뚝 끊깁니다 ㅠ

[codingapple]

x축 이동을 하지말거나 animation-timing-function을 다르게 해봅시다 

[글쓴이]

글