[CSS] CSS3 효과 animate 예제 사이트 (복사만 하면 쓰기 가능)

1. Animista

https://animista.net/

Animista - On-Demand CSS Animations Library

이 사이트 같은 경우는 애니메이션의 다양한 효과를 눈으로 직접 확인 할수 있고
장점은 내가 원하는 효과를 바로 복사해서 쓸 수 있다는 점이다.
굉장히 다양한 효과들이 있어서 참고 해 보면 좋을 것같다.

 

 

1. 원하는 스타일을 선택한다.

2. 소스내보내기를 눌러주세요.

 

 

 

 

 

 

 

2. CSS3 Animation cheat sheet

http://www.justinaguilar.com/animations/

CSS3 Animation Cheat Sheet - Justin Aguilar

우리가 자주쓰는 슬라이드 up, down, right, left 등의 효과를 확인할 수 있다.
한번에 다운로드 해서 클래스로 불러서 사용할 수 있다.

 

1. 원하는 스타일을 확인 가능하다. 버튼을 누르면 위에 빨간색 샘플로 확인 할 수 있다.

2. 맨 아래로 내려보면 소스를 전체 소스를 다운로드 할 수 있다.

3. SEE MORE EXAMPLES 을 누르면 예제 파일을 확인할 수 있다.

4. 컨텐츠로 만들어진 예제를 바로 확인할 수 있다.

 

 

 

 

3. Hover.css

https://ianlunn.github.io/Hover/

Hover.css - A collection of CSS3 powered hover effects

 

2D Transitions, Background Transitions, Icons, Border Transitions, Shadow and Glow Transitions, Speech Bubbles, Curls  다양한 전환 효과들을 gitHub에서 다운로드 가능하다.
css, less, scss 파일로 다양하게 활용 가능하다.

1. gitHub에서 css, less, scss 별로 다운로드 가능하다.

2. 2D Transitions, Background Transitions, Icons, Border Transitions, Shadow and Glow Transitions, Speech Bubbles, Curls 다양한 메뉴들로 스크롤를 내려서 간단하게 확인이 가능하다.

 

 

 

 

 

4. MAGIC EFFECTS

https://www.minimamente.com/project/magic/

Magic Animations CSS3

MAGIC EFFECTS, BLING, STATIC EFFECTS, STATIC EFFECTS OUT, PERSPECTIVE, ROTATE, SLIDE, MATH, TIN, BOMB, BOING, ON THE SPACE 등 다양한 효과를 한눈에 볼수 있고 복사 할수 있다.
파일을 다운로드 했을때 scss파일이라는 점 참고하면 되겠다.

1. 다양한 효과를 버튼 바로 옆에서 복사를 할 수 있다.
2. 클릭하면 상단에 우주선모양의 박스에서 효과를 바로 확인 가능하다.
3. 상단 오른쪽에 다운로드 버튼을 클릭하면 scss파일을 다운로드 할 수 있다.

 

 

 

 

 

5. CSS Animations Generator

https://www.theappguruz.com/tag-tools/web/CSSAnimations/

CSS Animations Generator

다양한 animations 효과를 볼 수 있는 사이트
Slide Effects, slideInDown, Fade Effcts, Zoom Effects, Bounce Effects, Flip Effects, Rotate Effects, Other Effects 의 메뉴들로 세분화 해서 나눠지어 효과를 확인 할수 있다.

1. 왼쪽 메뉴에서 다양한 메뉴를 클릭하면
2. 오른쪽 아저씨가 효과에 맞춰 움직인다.

3. Show CSS Code를 누르면 소스를 긁어 올수 있는 팝업이 떠서 소스를 가져올 수 있다.

 

 

 

 

 

 

6. Animate.comm

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

class="animate__animated animate__zoomInDown"  이중클래스로 제어 해 줄 수 있는 사이트
효과가 굉장히 많고 메뉴별로 클래스를 다운로드 할 수 있게 만들어 져 있다.

 

1. 오른쪽 다양한 효과를 클릭하면 왼쪽에 Animate.css에서 효과가 보여진다.

[Attention seekers]
bounce / flash / pulse / rubberBand / shakeX / shakeY / headShake / swing / tada / wobble / jello / heartBeat /
[Back entrances]
backInDown / backInLeft / backInRight / backInUp
[Back exits]
backOutDown / backOutLeft / backOutRight / backOutUp
[Bouncing entrances]
bounceIn / bounceInDown / bounceInLeft / bounceInRight / bounceInUp
[Bouncing exits]
bounceOut / bounceOutDown / bounceOutLeft / bounceOutRight / bounceOutUp
[Fading entrances]
fadeIn / fadeInDown / fadeInDownBig / fadeInLeft / fadeInLeftBig / fadeInRight / fadeInRightBig / fadeInUp / fadeInUpBig / fadeInTopLeft / fadeInTopRight / fadeInBottomLeft / fadeInBottomRight
[Fading exits]
fadeOut / fadeOutDown / fadeOutDownBig / fadeOutLeft / fadeOutLeftBig / fadeOutRight / fadeOutRightBig / fadeOutUp / fadeOutUpBig / fadeOutTopLeft / fadeOutTopRight / fadeOutBottomRight / fadeOutBottomLeft
[Flippers]
flip / flipInX / flipInY / flipOutX / flipOutY
[Lightspeed]
lightSpeedInRight / lightSpeedInLeft / lightSpeedOutRight / lightSpeedOutLeft
[Rotating entrances]
rotateIn / rotateInDownLeft / rotateInDownRight / rotateInUpLeft / rotateInUpRight
[Rotating exits]
rotateOut / rotateOutDownLeft / rotateOutDownRight / rotateOutUpLeft / rotateOutUpRight
[Specials]
hinge / jackInTheBox / rollIn / rollOut
[Zooming entrances]
zoomIn / zoomInDown / zoomInLeft / zoomInRight / zoomInUp
[Zooming exits]
zoomOut / zoomOutDown / zoomOutLeft / zoomOutRight / zoomOutUp
[Sliding entrances]
slideInDown / slideInLeft / slideInRight / slideInUp
[Sliding exits]
slideOutDown / slideOutLeft / slideOutRight / slideOutUp

2. 스크롤을 내리면 사용방법, 가이드가 있다.