ANIMATION8 Eye Card Animation Eye Card Animation 이번에는 codepen을 통해서 카드와 함께 사람 눈이 움직이는 애니메이션을 만들어 봤습니다. 1. HTML속 각각에 class를 querySelector 요소를 잡아줍니다. 2. animate 요소에 움직임을 주기 위해서 speed 요소도 잡아주며, 각 좌표에 값도 지정해줍니다. 3. script 안에 eye, wrap 요소의 스타일을 주며, perspective는 원근감 느낌을 주는 속성입니다. See the Pen Eye Card Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 26. Loading Animation Loading Animation 이번에는 codepen을 통해서 로딩 모션에 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen Loading Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 26. Square Animation Square Animation 이번에는 codepen을 통해서 정사각형 짧아지고 길어지는 모션이 반복되는 애니메이션을 만들어 봤습니다. 1. 기본적인 html 형태를 잡아줍니다. 2. css는 이번시간에는 전과 마찬가지로 mouseHover Animation에서 새로 익힌 perspective, preserve-3d를 사용했습니다. perspective : transform에 translateZ 추가해주며, 사용시 원근감을 느끼게 해줄 수 있습니다. preserve-3d : 요소에 3d 효과를 추가 해줍니다. See the Pen Square Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 22. mouseHover Animation mouseHover Animation 이번에는 codepen을 통해서 마우스오버 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 hover__updown과 hover__leftright에 transform효과를 넣어줍니다. 1. perspective : 3d효과에 생생함을 더해준다. 2. transform-style: preserve-3d; : 2d가 아닌 z축을 추가해주어 3d로 만들어준다. 3. backface-visibility: hidden; : 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성이다. See the Pen mouseHoverEffect by KDB6 (@kdb6) on CodePen. 2022. 9. 20. Wave Animation Wave Animation 이번에는 codepen을 통해서 웨이브 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, scss에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen Wave animation by KDB6 (@kdb6) on CodePen. 2022. 9. 19. Ball Animation Ball Animation 이번에는 codepen을 통해서 공이 튕기는 모션에 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen Ball Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 2. Loading Circle Animation Loading Circle Animation 이번에는 codepen을 통해서 로딩 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen loading circle animation by KDB6 (@kdb6) on CodePen. 2022. 8. 29. Box Animation Box Animation 이번에는 codepen을 통해서 기본적인 박스 가 움직이는 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen box animation by KDB6 (@kdb6) on CodePen. 2022. 8. 29. 이전 1 다음
