[CSS] animation 속성을 활용한 위아래로 움직이는 이미지 만들기
2021. 4. 30. 18:53ㆍWeb/CSS
728x90
CSS animation, @keyframes 을 활용해 위아래로 움직이는 것처럼 보이는 이미지를 만들어보겠습니다.
저는 font awesome의 무료 아이콘을 사용했고 정적인 이미지 파일인 jpg, png 등이나 다른 태그 요소를 활용해도 무관합니다.
아이콘은 아래 링크에서 확인하실 수 있습니다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
먼저 원하는 태그에 class를 생성해줍니다(저는 class명을 icon으로 주었고 뒤에 fas fa-bomb은 아이콘을 불러오기 위한 소스라 무시하셔도 됩니다)
<body>
<i class="icon fas fa-bomb"></i>
</body>스타일 태그에서 animation과 @keyframes 를 설정해줍니다.
@keyframes이란?
CSS 애니메이션에서 구간을 정하고 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다.
0%(처음) 일 때 margin-top: 0 으로 설정해 놓고 100%(마지막) 일 때 10px 값을 줘 위아래로 움직이는 듯한 모션을 만드는 원리입니다.
움직이는 방식은 margin, padding, top 등 다양한 방법을 활용할 수 있습니다.
<style>
.icon{
font-size: 5em;
animation: motion 0.3s /* 속도 */
linear 0s /* 처음부터 끝까지 일정 속도로 진행 */
infinite alternate; /* 무한 반복 */
}
@keyframes motion {
0% {margin-top: 0px;} /* 처음 위치 */
100% {margin-top: 10px;} /* 마지막 위치 */
}
</style>
'Web > CSS' 카테고리의 다른 글
| [CSS] jpg파일로 움직이는 텍스트 애니메이션(text animation) 만들기 (0) | 2021.05.22 |
|---|---|
| [CSS] bootstrap 사용법 (0) | 2021.05.19 |
| [CSS] flex 속성 (0) | 2021.05.08 |
| [CSS] z-index 속성 (0) | 2021.04.25 |
| [CSS] position 속성 (0) | 2021.04.25 |