[css animation] hover와 함께 유용하게 활용할 수 있는 애니메이션 정리

http://rwdb.kr/mouseoverinteraction/

컨텐츠에 집중을 도와주는 마우스 오버효과들 총정리! - RWDB

 

위 사이트에 순수 css만으로 구현한 화려한 애니메이션들이 잘 정리되어있는데,

 

이 중 특히 "우와~" 했던 것 몇 개를 골라 부가적인 꾸밈요소, 헷갈리는 코드들은 지우고 간결하게 만들어서

나중에 어디든 활용할 수 있도록 내 버전으로 정리해보았다! 😀

 

 

같은 자리에서 뒤집어지며 바뀌는 텍스트

- absolute로 고정된 자리를 주고, 마우스오버 시 opacity(불투명도)와 translateY(세로이동값)를 변경해주는 게 키포인트다.

- 만약 absolute 고정값을 주지 않으면, 같은 자리에서 바뀌는 게 아닌 것처럼 보이게 된다 (부자연스러움)

 

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.

 

 

모자이크 처리되며 나타나는 화면

- before, after 값을 height: 25%로 주어서, 모자이크 한 줄이 화면의 1/4 크기를 차지하도록 했다.

- left, right 값을 각각 50%로 주어서 모자이크가 가운데서부터 시작되는 것처럼 보이도록 했다 (만약 left, right 값 없으면 그냥 가로 일자로 진행되는 동작처럼 보인다)

- top0% / top25% / top50% / top75% 위치의 before 또는 after 요소들에 각각 transition-delay를 0.1 / 0.2 / 0.3초씩 줘서 물흐르듯 순차적으로 진행되는 듯 보이도록 했다.

- 마지막 요소는 0.4초를 주는 게 아니라, top, bottom, right, left 값을 모두 0으로 줘서 최종적으로는 새로 나타나는 화면이 가득 찬 것처럼 보이도록 했다.

- 4분할해서 높이를 25%씩 주고, 각 등분을 수작업 노가다(?)로 0.1s씩 시간을 다르게 주어야 하는구나..

 

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.

 

 

옆으로 날아가며 나타나는 새로운 화면

- 전체완료 시점까지의 절반 지점(50%), 전체완료 지점(100%)의 동작을 키프레임을 통해 각각 정의했다.

 

- 기존에 보이고 있던 화면은 아래 효과들을 동시에 적용받고, 

1) 0.8배 크기로 줄어듦

2) 0.5투명해짐

3) 왼쪽으로 날아감

 

- 새로 나타나는 텍스트는 원래의 0.5배 크기로 중간에 위치한 채로 숨어있다가(=opacity 0)

마우스오버 시 opacity 1로 변하며 어디선가 날아오는 것처럼 보이게 된다.

 

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.

 

위아래로 늘어나는 텍스트 박스

- 아래 그림에의 '텍스트만큼 잘린 박스' 구현하는 게 핵심

- 사각형의 윗변은 position absolute로 top 45%에, 아랫변은 bottom 45%에, 좌측 및 우측변은 각각 7%에 위치해있다.

- hover 시 top과 bottom은 위치가 각각 7%로 변한다.

- 테두리는 border-width: 1px 1px 0로, <상/좌우/하>를 의미한다. 즉, 하단 테두리는 0으로 없앤 상태다.

- 그렇다면 '타'와 '다' 옆에 빼꼼 나와있는 건 테두리가 아니라 뭐다? before와 after 요소다!

- h2태그에 display: table를 줬는데, 만약 이게 없으면 빼꼼 나오는 before, after가 안먹는다.

 

 

See the Pen Untitled by dykim-datadriven (@dykim-datadriven) on CodePen.