반응형
이미지 키프레임 애니메이션 효과[CSS] - animista.net
짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게 하거나 플립(뒤집다) 효과를 줄 수도 있고, 여러 가지 효과들이 많이 있다. 사이트가 무거워지는 것이 싫어서 애니메이션 효과는 가급적 지양하는 편인데, 잘만 사용하면 굉장히 생동감 넘치는 사이트를 만들 수 있다.
정말 유용하며, 다양한 효과를 제공한다. 어디까지나 이미지 뿐만 아니라 텍스트에도 적용이 가능하고 어떻게 구성하느냐에 따라서 다양하게 활용할 수 있을 것이다. 예를 들면, 로고 같은 곳에다가 적용해도 참 예쁘게 적용이 가능할 것이라고 생각된다.
참조
반응형
'Web Development > CSS' 카테고리의 다른 글
| IE에서 object-fit 속성처럼 적용하는 방법 (0) | 2021.07.17 |
|---|---|
| [CSS] overflow 속성 정리(hidden, auto, scroll) (0) | 2021.07.17 |
| [CSS] IE(익스플로러)에서 말줄임 또는 -webkit-line-clamp 이슈 (0) | 2021.07.17 |
| CSS SVG/CSS Loader 예제 (0) | 2021.07.17 |
| [CSS] Font-Smoothing 안티앨리어싱 속성 (0) | 2021.07.17 |
| CSS 선택자 :nth-child() 사용법 (0) | 2021.07.17 |
| Border CSS 테두리 속성 반복 적용하는 방법 (0) | 2021.07.17 |
| 유튜브 모바일 반응형 CSS 적용방법 및 과정 (0) | 2021.07.17 |
