() translation by (you can also view the original English article)
인터넷 역사에 애니메이션 되는 GIF보다 뛰어난 시각 효과를 웹사이트에 넣으려고 플래시를 사용해야 했던 시기가 있었습니다. 오늘날로 빠르게 거슬러 올라오면, 플래시는 더 이상 사용되지 않고 CSS3와 HTML5와 같은 코드로 웹에서 환상적인 애니메이션과 효과를 주는 것을 알게 됩니다.
웹사이트나 다음 웹 프로젝트에 훌륭한 CSS 애니메이션을 넣고 싶다면, 여러분이 시작할 수 있도록 CodeCanyon에서 가장 좋은 CSS 애니메이션 20가지 목록을 알려드리겠습니다.
1. Aero - CSS3 Hover 효과
Aero - CSS3 Hover 효과를 이용해 부분적으로 음영이 들어가고 유리 같은 하늘 이미지의 hover 효과를 추가하세요.
이는 반응형이며 사용하기 편합니다. 그리고 여러분은 아래 내용을 발견할 것입니다.
- 색상 변경과 원형에서 사각형으로의 쉬운 교체
- 모든 브라우저와의 호환성, Microsoft Edge까지도 호환됨
- SASS와 호환됨
- 맞춤형 CzS
- 그 외 다수
출시할 당시 10가지 효과가 들어 있었고 앞으로도 더 많아질 Aero - CSS3 Hover 효과는 이미지 hover 효과를 위해 CSS 애니메이션을 수월하게 적용할 수 있는 번들입니다.
2. MegaHover 마우스오버 효과
MegaHover 마우스오버 효과는 Bootstrap 3과 호환 가능한 CSS3 이미지 hover 효과의 강력한 배치를 제공합니다.
게다가
- Font Awesome 아이콘 사용
- 브라우저 호환성
- 완전한 반응형
- 그 외 다수
MegaHover 마우스오버 효과를 수백 가지의 보기 좋은 hover 효과와 쉽게 통합하고 변경해 보세요.
3. Animatia - CSS 이미지 Hover 효과
쉬운 사용성과 최소한의 로딩 시간, 원하는 대로 변경 가능하다고요? Animatia - CSS 이미지 Hover 효과가 바로 이것이며 그 이상입니다.
이 CSS 배치(batch)에는 다음과 같은 것이 들어 있습니다.
- 115가지 이상의 맞춤형 hover 효과
- 반응형이며 사용하기 용이한 파일들
- 순수 CSS3와 Font Awesome 아이콘
- 그 외 다수
버튼 스타일과 오버레이 효과, 캡션과 그 외의 CSS 애니메이션에 Animatia - CSS 이미지 Hover 효과를 사용해 보세요.
4. Hover 효과 프레임워크
Hover 효과 프레임워크는 정말로 매끄러운 CSS 애니메이션 솔루션입니다.
깔끔한 코드와 반응형, 그리고
- IcoMoon 최고의 폰트
- 4가지 형태와 5가지 색상
- 50가지 이상의 애니메이션
- 그 외 다수가 있습니다.
Hover 효과 프레임워크에는 코드가 깔끔하게 작성되어 있고, 무엇보다도 멋진 CSS 애니메이션으로 시작하게 해주는 예제가 많이 들어 있습니다.
5. 프리로더(Preloaders) 컬렉션
프리로더 컬렉션을 소장한 후에는 또 다른 프리로더 컬렉션이 결코 필요 없을지 모릅니다.
아래와 같은 자료를 소장하게 됩니다.
- 맞춤화하기 쉬운 사용 설명서
- 용량이 가볍고 유연한 CSS3 애니메이션 세트
- 27가지 독특한 프리로더
모바일에 친화적인 프리로더 컬렉션은 모든 이들의 CSS3 연장통에 추가로 들어갈 훌륭한 도구입니다.
6. CSS3 이미지 Hover 효과
이미지 hover 효과용 CSS 애니메이션을 하나 보면, 모든 효과를 본 것입니다. 그렇죠?
전혀 그렇지 않습니다.
CSS3 이미지 Hover 효과에는 정말로 멋지고 비길 데 없는 효과들이 들어 있습니다.
다음과 같은 내용이 있습니다.
- 22가지 다양한 CSS3 이미지 hover 효과
- 근사해 보이며 반응형임
- 깔끔한 CSS3 코드
- 그 외 다수
Bootstrap과 호환되는 CSS3 이미지 Hover 효과를 확인해 보세요.
7. 이미지 Hover CSS 라이브러리
이미지 Hover CSS 라이브러리는 확장 가능하고 가벼운 이미지 hover CSS 애니메이션 라이브러리로 볼만합니다.
이는 58가지 hover 효과 class가 들어 있는 훌륭한 컬렉션이며, 압축된 파일 용량은 25KB밖에 되지 않습니다.
- 모든 hover 콘텐츠와 작동함
- 독특한 hover 효과
- 사용하기 쉬움
- 그 외 다수
다른 이미지 hover CSS 애니메이션과 구분하기가 힘들지만, 이미지 Hover CSS 라이브러리는 가능합니다.
8. SVG 로고 스크롤 애니메이션 | CSS3와 Javascript
흔한 이미지 hover 효과에 관한 CSS 애니메이션과 결별하고, SVG 로고 스크롤 애니메이션 | CSS3와 Javascript로 주의 깊게 살펴보는 게 좋습니다.
4k 이하뿐인 아름다운 스크롤 페이지 SVG 애니메이션을 더해줍니다.
SVG 로고 스크롤 애니메이션 | CSS3와 Javascript로 아름다운 웹페이지 애니메이션을 제작해 보세요.
9. Viavi CSS3 스크롤 효과
Viavi CSS3 스크롤 효과는 굉장히 멋진 CSS3 HTML 스크롤 애니메이션 솔루션입니다.
다음과 같은 피처가 있습니다.
- 16가지 CSS 3 스크롤 효과
- 간단한 구현
- 완전한 반응형
- 그 외 다수
전체를 그리드 구조로 사용하고 모바일 용도로 터치가 가능한 Viavi CSS3 스크롤 효과는 보기에도 좋지만, 실행도 잘 됩니다.
10. CSS3 스피너(Spinners)와 로더(Loaders)
gif를 사용하지 않는 로더(loader)가 필요한가요?
문제 없습니다. CSS3 스피너와 로더가 도와주니까요.
- 25가지 이상 변화
- 원하는 대로 변경하기 쉬움
- 용이한 확장성
CSS3 스피너와 로더는 설명서가 잘 작성되었고, 스피너와 로더 용도로 된 순수 CSS 솔루션입니다.
11. Midix - jQuery가 없는 CSS3 애니메이션 효과
CSS3만을 사용하는, jQuery 없는 Midix - CSS3 애니메이션 효과는 견고한 16가지 CSS 애니메이션 세트를 전해 줍니다.
다음과 같은 속성을 변경할 수 있습니다.
- 애니메이션 속도
- 애니메이션 지연 시간
- 아이콘 색상
Midix - jQuery 없는 CSS3 애니메이션 효과를 이용해 훌륭한 CSS 애니메이션 컬렉션을 갖게 될 뿐만 아니라 무료 업데이트와 친절한 지원도 받습니다.
12. CSS3 Hover 효과
CSS3 Hover 효과는 또 다른 좋은 옵션이 됩니다.
다음과 같은 속성을 쉽게 바꿀 수 있습니다.
- 색상
- border 크기
- 원형에서 사각형으로
- 텍스트 블록 사이 간격
479가지 레티나 아이콘과 20가지 다양한 효과가 들어 있는 CSS3 Hover 효과는 소장하고 사용하기에 훌륭한 리소스입니다.
13. VSPreloader - 최고의 CSS 애니메이션 프리로더
애니메이션 되는 프리로더에 비해 VSPreloader - 최고의 CSS 애니메이션 프리로더는 여러분이 찾게 될 더 독특하고, 창의적이며, 멋진 솔루션 중 하나입니다.
다음과 같은 피처가 들어 있습니다.
- 60가지 헬퍼(helpers)
- 40가지 프리젠트(presents)
- 30가지 애니메이션
- 한계 없는 색상
또한, 믿을 수 없을 정도로 트랜디하며 독특합니다.
VSPreloader - 최고의 CSS 애니메이션 프리로더를 세심하게 살펴보세요. 제 생각에 여러분이 감동할 것입니다.
14. Heed - 순수 CSS3 애니메이션 효과
Heed - 순수 CSS3 애니메이션 효과는 여러분이 CSS 애니메이션 컬렉션에서 바라는 모든 것을 제공합니다.
설치하고, 편집하며, SCSS(파일이 포함됨)로 설정하는 작업이 쉽습니다.
- 20가지 머티리얼 디자인 색상 옵션
- Font Awesome 아이콘
- 15가지 효과
- 그 외 다수
Heed - 순수 CSS3 애니메이션 효과는 레티나 화면에 친화적이며, 친절한 고객 지원과 업데이트가 무료입니다.
15. Ayan - CSS3 링크 Hover 효과
여러분이 찾은 대다수의 CSS 애니메이션이 이미지와 페이지 효과에 집중하는 한편, Ayan - CSS3 링크 Hover 효과는 인상적인 링크 hover 효과들을 줄지어 제공합니다.
30가지 굉장하게 보이는 CSS3 링크 hover 효과와 함께 다음 내용을 알게 됩니다.
- 확실한 브라우저 호환성
- 도움말 설명서
- 최신 애니메이션
- 그 외 다수
Ayan - CSS3 링크 Hover 효과 번들은 창의적이며 트랜디합니다. 더불어 과도하게 현란하지 않은 CSS 애니메이션으로 마무리를 잘했습니다.
16. Sinister - 순수 CSS 이미지 Hover 효과
100가지 이상의 hover 효과를 자랑하는 Sinister - 순수 CSS 이미지 Hover 효과는 엄청난 수의 디자인이 잘 된 효과들을 제공합니다.
아래보다 더 많은 효과가 들어 있습니다.
- 22가지 콘텐츠 트랜지션 효과
- 18가지 오버레이 트랜지션 효과
- 23가지 버튼 트랜지션 효과
- 100가지 hover 효과
자바스크립트나 jQuery를 사용하지 않고, 오직 CSS만 사용하는 Sinister - 순수 CSS 이미지 Hover 효과는 다음과 같은 기능을 보여줍니다.
- 확대와 축소
- X와 Y 회전(rotate)
- 오른쪽과 왼쪽으로 회전
- 회전과 확대 비율(scale)
- 정육면체(cubic) 트랜지션
- 레이어 hover
- 그 외 다수
17. 트랜디한 소셜 미디어 애니메이션 아이콘 스타일
트랜디한 소셜 미디어 애니메이션 아이콘 스타일을 이용해 멋진 CSS 애니메이션을 소셜 미디어 아이콘에 더해 보세요.
깔끔한 디자인과 선택 가능한 아홉 가지 다양한 스타일과 더불어 다음과 같은 내용을 경험할 수 있습니다.
- 용이한 구현과 맞춤화
- 견고한 코드 기반과 설명서
- 이미지나 아이콘에 의존하지 않음
- 브라우저 호환성
- 그 외 다수
트랜디한 소셜 미디어 애니메이션 아이콘 스타일은 여러분의 소셜 미디어 아이콘 목록에 색상과 CSS 애니메이션의 마무리를 멋지게 더해 줍니다.
18. CSS3 애니메이션
CSS3 애니메이션을 이용해 HTML의 div와 p, body를 쉽게 애니메이션 해 보세요.
이는 다양하고 수많은 디자인 상황에서 사용되고 적용될 수 있는 훌륭한 코드입니다.
다음과 같은 피처가 들어 있습니다.
- 사용 및 변경하기 쉬움
- 오직 CSS3만으로 제작됨, 자바스크립트 없음
- 10가지 이상의 애니메이션
여러분의 디자인 연장통에 CSS3 애니메이션을 추가하겠습니까?
19. 순수한 CSS3 이미지 아코디언(Pure CSS3 Image Accordion)
멋진 CSS 애니메이션용으로 순수한 CSS3 이미지 아코디언을 이용해 자신만의 슬라이더 셋업이나그와 유사한 것을 제작해 보세요.
다음과 같습니다.
- 완전한 반응형
- 너비가 고정되지 않음
- 4가지 캡션 옵션
- 원하는 대로 변경하기 쉬움
이 순수한 CSS3 이미지 아코디언을 이용해 시각적 음악을 제작해 보세요.
20. CSS3 메가 툴팁 애니메이션 팩
단순한 툴팁에 싫증이 나나요?
CSS3 메가 툴팁 애니메이션 팹을 사용해 CSS 애니메이션 매력을 더해 보세요.
이 CSS 애니메이션 툴닙 팩에는 아래 내용이 들어 있습니다.
- 10가지 애니메이션 효과
- 8가지 컬러 프리셋
- 설명서(documentation)
- 그 외 다수
CSS3 메가 툴팁 애니메이션 팩에는 인터넷 익스플로러 대비책(fallback) 기능도 포함되어 있습니다.
마무리
Envato Market에 이용 가능한 다수의 다양한 CSS 애니메이션이 있을지라도 여러분이 찾고 있는 것을 어쩌면 발견하지 못했을 수도 있습니다.
그건 문제가 되지 않습니다. 여러분이 직접 제작할 수 있으니까요!
Mastering CSS3와 같은 Envato eBook을 확인해 보거나 제공되는 여러 가지 코딩 수업을 듣거나 주요한 CSS3 코드 튜토리얼을 찾아 따라 해 보세요.
