ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko en en ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#18 CSS 코드로 애니메이션 구현하는 방법 – 웹 코딩 강좌 | 디자인베이스
홈 멤버십 전용 #18 CSS 코드로 애니메이션 구현하는 방법 – 웹 코딩 강좌
해당 강좌는 유튜브 멤버십 회원 전용 강좌입니다.
웹 디자이너를 위한 웹 코딩 강좌 시간입니다. 이번 시간에는 CSS 애니메이션을 사용하는 방법에 대해서 알아보도록 할게요. 지금까지 예제를 배워보며 간간이 나왔던 transition과 animation의 차이점도 알아보면서 어떤 식으로 사용되는지 알아봐요.
예제 다운은 멤버십 회원 커뮤니티에 올린 링크에서 받으실 수 있습니다.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
자바스크립트를 몰라도 쉽게 사용할 수 있고, 특정 키 프레임을 만든 후에 다양한 곳에 반복 적용이 가능한 장점이 있어요. 그리고, 현재 뷰포트 상에서 안 보이는 엘리먼트에 대한 애니메이션 업데이트 주기를 줄여 브라우저 성능에 최적화할 수 있고, 부드럽게 렌더링을 하는 장점이 있어요.
앞에 이런 예제를 만들 때 transition이 나왔는데 무슨 차인지 궁금하시죠. 트랜지션은 요소의 상태가 변해야 애니메이션을 실행합니다. 예를 들면 마우스 오버를 하거나, 아니면 클래스가 변하거나 등의 상태를 말합니다. 반면 animation은 키 프레임 단위로 변경할 수 있습니다. 반복 재생 횟수, 재생 방향 등 세세하게 조절이 가능합니다.
.animation{ animation: fade-in-up 3s; } @keyframes fade-in-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
animation은 아래 코드처럼 속기형으로 할 수도 있습니다.
Animation name / Duration / timing-function / delay / direction / iteration-count입니다.
.animation{ animation: fade-in-up 3s ease-in 1s reverse infinite; }
Animation의 단일 속성들은 아래와 같습니다.
.animation{ animation-name: none /* 키프레임에 설정한 애니메이션 이름 */ animation-duration: 0s /* 애니메이션 작동 시간 */ animation-timing-function: ease /* 타임펑션 (텐션 조절) */ animation-delay: 0s /* 몇 초 뒤에 애니메이션을 시작할지 딜레이 */ animation-iteration-count: 1 /* 몇 번 작동할지 (3 or infinite) */ animation-direction: normal /* 애니메이션 방향 정하기 */ animation-fill-mode: none /* 애니메이션 후 기본값으로 되돌리기보다 최종 상태로 유지하는 방법 */ animation-play-state: running /* 애니메이션 상태를 멈추거나 재생할 수 있는 속성값 */ }
07. 지우고 자르는 툴바 Erase tool, Scissors tool – 일러스트레이터 기초 강좌
#05 도형에 재질 추가하는 방법(Material) – Three.js 강좌
디자이너가 추천하는 멋스러운 영문서체 무료 다운
디자이너가 무조건 피해야 할 회사 유형
오너의 마음으로 프로젝트의 A부터 Z까지
클릭 한 번으로 웹사이트 화면 캡쳐뜨는 방법(크롬 확장 프로그램)
롤업 스탠딩 배너 목업
아이폰 손으로 잡고 있는 목업
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.