비디오: 웹디자인&퍼블리싱 움직이는 웹모션코딩 애니메이션효과 트랜지션 - [코딩하는남자{코남}] 2024
iPad 또는 iPhone에 표시하기 위해 웹 사이트에서 창의적으로 정보를 전달하려는 경우, 애니메이션 및 기타 대화 형 기능을 추가하는 가장 좋은 옵션 중 하나는 CSS 3 CSS 3는 상호 작용 효과와 애니메이션을 만드는 세 가지 주요 방법, 즉 변환, 전환 및 애니메이션을 소개합니다.
CSS 3에는 많은 새로운 디자인 기능이 추가되었지만 애니메이션이 가장 흥미 롭습니다. CSS 3을 사용하면 캐릭터가 화면을 가로 질러 지나가고, 상자가 뒤집어지고, 이미지가 사라지게 할 수 있습니다. CSS 3에서 애니메이션이 어떻게 작동하는지 보여주기 위해이 그림은 블랙 박스에서 튀는 간단한 공을 보여줍니다.
이 튀는 공 애니메이션을 만드는 데 사용 된 이미지가 없습니다. 볼 자체와 화면 상단에서 하단으로 다시 돌아 오는 것처럼 보이는 동작은 CSS 3 코드 몇 줄로 모두 이루어졌습니다.
Safari (Mac, Windows 및 iPad / iPhone / iPad 용 iOS)와 Chrome (Mac, Windows 및 Google Android 운영체제를 실행하는 기기)을 비롯하여 WebKit을 사용하는 대부분의 브라우저에서이 애니메이션이 작동합니다.
이러한 기능을 사용하면 많은 훌륭한 디자인 효과를 만들 수 있지만 웹에서 가장 많이 볼 수있는 대화 형 사이트는 HTML과 CSS 외에도 JavaScript가 필요합니다.