[css] 하트 클릭 시 날아오르는 Animation

이 블로그 시작할 때 말투에 대해서 고민을 했었는데, 제 책상이 두두두 타자 울리기도 해서 조금이라도 줄일 겸, 그리고 "~다"로 해보니 편해서 "~했다." "~했었다."라는 투로 진행했었습니다. 근데 하다 보니 뭔가 이 투는 거만한 투가 아닌데도 거만한 느낌이 들더군요. 아마도 누군가에게 가르치는 수준도 안 되는 제 실력으로 인해 생긴 이질감인 듯합니다.. 이 투로 쓰면 또 뭔가 가르치는 것 같기도 해서 존칭을 쓰기로 정했습니다. 오늘 안에 게시글 다 수정하려고 했으나 블로그에 제 하루를 쓰기에는 공부하고 취업준비를 해야 하는 입장으로서 너무 초조함도 들어 이전 게시글을 하루에 2개씩 해서 차차 수정 해갈 계획입니다. 하루에 2~4개씩 수정해서 완료했습니다.

 

---

 

하트 클릭 시 나타나게해서 날아오르게도 할 수 있습니다. 나타나게 하는 것은 저는 opacity를 사용했습니다. 그런데 opacity로 사라지게 하는 것 까진 했으나 한 가지 문제점이 있었습니다. html에서 아예 사라지는 건 아니라서 opacity:0을 적용한 하트의 공간은 남아있었고 그래서 클릭 시 옆에서 또는 아래에서 날아오르는 겁니다.

 

그래서 저는 position을 사용해서 노출되어있는 하트는 부모로(position:relative) 그리고 opacity:0인 하트는 자식으로(position:absolute) 지정하고 따로 left, right같은 위치 지정은 안 하여 둘이 겹치게끔 했습니다. 

 

아래는 하트 애니메이션 구현한 css 코드입니다.

 

.heart-fly{
	opacity:1;
	animation:heart-fly .7s cubic-bezier(0.250,0.460,0.450,0.940) both
}

@keyframes heart-fly{
0%{
	opacity:0
	}
15%{
	opacity:0
	}
25%{
	opacity:0;
	transform:rotateY(15deg) translateY(-60px)
	}
50%{
	opacity:.1;
    	transform:rotate(15deg) translateY(-75px) translateX(-20px)
   	}
65%{
	opacity:1;
    	transform:rotate(15deg) translateY(-75px) translateX(-20px)
  	}
75%{
	opacity:1;
    	transform:rotate(15deg) translateY(-150px) translateX(20px)
    }
85%{
	transform:rotateX(15deg) translateY(-200px) translateX(-20px)
    }
95%{
	transform:rotateX(15deg) translateY(-300px) translateX(20px)
    }
100%{
	opacity:0
    }
}

 

저는 이렇게 구현했습니다. 이 코드 참고하셔서 잘 활용하시면 될 듯합니다..!