📍 애니메이션 만드는 단계 (one-way)
애니메이션 만들때는 기억하자!!
- 시작스타일 만들기
- 최종스타일 만들기
- 언제 최종스타일로 변하는지
- transition 속성으로 애니메이션 입히기.
📍 사진에 마우스 올리면 회색 박스가 이미지 반쯤 올라오게 만들기
✓ 만들때 어려웠던점
처음에 마우스를 사진에 올렸을때 회색 박스가 보여지게 하는건
'opcitiy 조절로 하면 되겠다.' 생각했지만
밑에서 가운데로 올라오는 모양으로 회색 박스가 움직여야 했기에 그건 아니였다.
그리고 height 값의 조절로 움직여야지 했더니,
회색박스가 제일 위에서 가운데로 움직여졌다 🤦♀️
그래서 생각했던게 좌표를 옮겨주는 transform 속성으로 세로 방향 (y축) 을
옮겨야겠다는 아이디어가 떠올랐고, 생각대로 잘 실행되었다. 😜
front-end ing