link : https://www.designyourway.net/blog/design/css-animation-examples-that-you-will-like/
웹 기반의 솔루션, 그리고 애니메이션을 제작하려는 사람이라면 이제 더 이상 플래시를 만들 필요가 없다는 긍정적 사실에 놓여져있습니다.
이제는 Flash뿐만 아니라 After Effects 및 Silverlight와 같은 프로그램에 의존하지 않고도 CSS를 사용하여 하단과 같은 작업을 만들 수 있죠.
다음은 CSS 애니메이션이 기존의 애니메이션보다 많은 장점 중 일부입니다.
- 이전의 자바 스크립트 지식이 없어도 만들 수 있으며 간단한 애니메이션 측면에서 사용하기 쉽습니다.
- 애니메이션은 언제나 잘 작동합니다. 또한 CSS에서 작동하는 렌더링 엔진은 프레임 건너 뛰기와 같은 기술을 사용하여 애니메이션 성능을 매우 매끄럽게 유지할 수 있습니다.
- 브라우저는 현재 보이지 않는 탭에서 실행되는 애니메이션 관련 업데이트 빈도를 줄임으로써 애니메이션 시퀀스의 전반적인 효율성과 성능을 최적화 할 수 있습니다.
애니메이션을 통해 다양한 요소가 시각적으로 변경될 수 있습니다.
CSS3 애니메이션은 애니메이션을 사용하기 전에 애니메이션 자체에 특정 키 프레임을 지정할 시간이 필요합니다. 이는 다양한 요소가 어떤 특정 스타일을 유지할 것인지 결정할 것입니다.
이 페이지에 나열된 다른 CSS 애니메이션 예제는 CSS가 현재 할 수있는 것과 정확히 일치합니다.
커피 메이커 애니메이션
CSS 3D 솔라 시스템
태양계 데이터 시각화는 HTML / CSS 및 자바 스크립트로 이루어집니다.
CSS 화성 착륙
무인도 행성이 아닌 우주선의 작은 애니메이션.
탄성 SVG 사이드 바 재질 디자인
애니메이션 라이브러리없이 완료되었습니다. requestAnimationFrame과 사용자 정의 easings가있는 단순한 js입니다.
CSS 어벤저 스
CSS 그림 및 애니메이션은 Robin Davey로부터 영감을 얻었습니다.
순수한 CSS를 하나의 사업부 날씨 애니메이션 아이콘
순수한 CSS 주간 / 야간 토글 스위치
Google Now 타사 앱
수탉
애니메이션이있는 CSS 만 GIF에서 영감을받습니다. Dribbble의 Pier Paolo에서 수탉 루프.
메뉴 아이콘 애니메이션
영화 크레딧
테이프 레코더
CSS + SVG 팩맨
순수한 CSS 메뉴 전환
css를 사용하여 체크 박스 속성을 사용하여 메뉴 "햄버거"전환을 수행합니다.
CSS 프리 로더
제출 버튼
캔버스와 HTML5로 만든 입자 버튼
CSS Gooey 메뉴
플립 사이드
예 / 아니오 확인으로 원활하게 전환되는 버튼.
순항 중 '
통계 애니메이션
스타 워즈 토글 아이콘 애니메이션
애니메이션 텍스트 채우기
애니메이션 배경 이미지로 텍스트를 채 웁니다. 자바 스크립트는 필요하지 않으며 웹킷 만 사용할 수 있습니다.
즐거운 체크 박스 애니메이션
즐거운 svg-less 애니메이션으로 깔끔한 작은 체크 박스
Twitter 버튼 개념
간단한 포커스 인 / 아웃 입력 애니메이션
입력 포커스에서 매우 간단한 애니메이션 입 / 출력. CSS3 키 프레임 애니메이션과 jQuery 전송에 대한 약간의 도움이되었습니다.
색 삼각형
애니메이션 쇼핑 카트 아이콘
"Fake Fruit Shop"에 대한 SVG 애니메이션 및 상호 작용을 실험 해보십시오. 지금은 크롬 만.
CSS 로딩 애니메이션
햄버거 아이콘 CSS3에만 애니메이션
서명 애니메이션
CSShake
모달 애니메이션 물리학
모달을 위해 키 프레임 / 전환 물리학을 사용합니다. 주로 오버레이, 모달 컨테이너 및 모달 콘텐츠 사이의 타이밍에 초점을 맞추어 전체 이벤트를보다 유기적으로 보입니다. 믿거 나 말거나 슈퍼 마리오 3D의 팝업 메뉴에서 영감을 얻었습니다.
3D 보행 로봇
순수 CSS 관점 포트폴리오 v2
페이지 매기기 화살표 플렉스
Indatus CSS 애니메이션
이 작업 진행중인 CSS 애니메이션은 Indatus.com 제품인 Answer Automation을 보여줍니다. 최소한의 재미있는 방식으로 일부 기능과 UI를 보여줍니다.
바운스 CSS 애니메이션 - v2
