웹디자인

움직이는 웹사이트 웹모션코딩 애니메이션효과 키프레임keyframes 웹디자인amp퍼블리싱 HTMLCSS코남

페이지 정보

작성자 코남 작성일19-07-09 10:50 조회10회 댓글0건

본문



안녕하세요 HTML과 CSS로 비쥬얼 아트 코딩을 지향하며 코딩하는 남자 코남입니다.

이번 강좌는 제가 정말정말정말정말정말 좋아하는 코딩인 키 프레임입니다. 웹사이트에서 움직이는 애니메이션을 만들기 위한 최종본!!! 키 프레임에 대해 이해하고 간단한 예제를 만들어 볼 수 있도록 준비해 보았습니다.

※ 이번 강좌는 구독자분들의 의견을 반영해서
속도를 늦춰서 제작하였습니다.

transition과 @keyframes 의 구분도 정의해 보았는데요 ~ 부족한 부분이 많지만 제가 이해하고 아는 방법을 최대한 표현해서 강좌를 준비했습니다. 예를 들어서 transition은 마우스가 올라가기 전과 후에 대한 변화 값을 애니메이션화 할 수 있는 단순한 방법으로 제작 할 수 있지만, 키 프레임은 0%에서 100%가 되는 순간까지 한 땀 한 땀 웹 모션을 제작 할 수 있습니다.

키 프레임을 다 알려면 한 개의 영상으로 담기는 힘들지만, 기초적인 부분을 이해하기 쉽게 다뤘다고 생각해주시면 감사하겠습니다.

※ Browser support
① 익스플로러10
② Edge 12

--- --- ---
이번 강좌에서는 접두사가 빠졌습니다.
접두사까지 다루기에는 영상이 너무 길어지고 편집도 힘들어서 일단 빼 두었는데 다음 영상부터는 접두사를 사용해서 코딩하는 방법을 준비하겠습니다. 접두사는 크로스 브라우징에 맞추기 위해 사용하는 것입니다.

크롬&사파리 : -webkit-
파이어폭스 : -moz-
오페라 : -o-
인터넷 익스플로러 : -ms-
--- --- ---

예제 파일은 준비해서 아래 블로그 경로에 올려두도록 하겠습니다. 많은 관심 가져주셔서 감사드립니다.

-
본 강좌가 도움이 되셨다면
좋아요와 구독하기 부탁드립니다.
문의 사항은 이메일로 보내주셔도 됩니다.
-
B/블로그 : https://blog.naver.com/co-nam/
E/이메일 : co-nam@naver.com

댓글목록

등록된 댓글이 없습니다.

Total 434건 1 페이지
  • RSS
게시물 검색
Copyright © www.designclip.co.kr. All rights reserved.  Contact : help@oxmail.xyz