CREATIVE

[CSS] 이미지 애니메이션 효과 적용하기(Keyframe)

Web Development/CSS
2020. 5. 17. 10:45

[CSS] 이미지 애니메이션 효과 적용하기(Keyframe)

이미지 키프레임 애니메이션 효과[CSS] - animista.net

짧게 정리하는 유용한 사이트, CSS 키프레임 속성을 통해서 이미지에 애니메이션 효과를 줄 수 있다. 마우스 오버를 할 경우 이미지를 확대하게 하거나 플립(뒤짚다)효과를 줄 수도 있고, 여러가지 효과들이 많이 있다. 사이트가 무거워지는 것이 싫어서 애니메이션 효과는 가급적 지양하는 편인데, 잘만 사용하면 굉장히 생동감 넘치는 사이트를 만들 수 있다.

 

정말 유용하며, 다양한 효과를 제공한다. 어디까지나 이미지 뿐만 아니라 텍스트에도 적용이 가능하고 어떻게 구성하느냐에 따라서 다양하게 활용할 수 있을 것이다. 예를 들면, 로고 같은 곳에다가 적용해도 참 예쁘게 적용이 가능할 것이라고 생각된다.

참조

CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN