[CSS] Next.js Image + 화면 아래 가리키는 화살표 애니메이션

next.js에서 이미지를 불러오기 위해서는 <img> 대신에 <Image> 모듈을 쓰는 것이 좋다!  리사이징, 최적화, 브라우저 호환 등을 지원한다. 화살표 움직임에는 애니메이션 속성을 통해 다양하게 표현할 수 있다.

 

728x90

 

---

 

animation 속성

속성	의미
animation-delay	엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정
animation-duration	한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정
animation-timing-function - linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)	애니메이션 진행 속도, 또는 가속 방식을 지정
animation-iteration-count - infinite : 무한 반복	애니메이션이 몇 번 반복될지 지정
animation-direction - normal : 정방향 재생 - reverse : 역방향 재생 - alternate : 정방향과 역방향으로 한 번씩 번갈아 재생 (정 방향 시작) - alternate-reverse : 역방향과 정방향으로 한 번씩 번갈아 재생 (역방향 시작)	애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정

 

전체 코드

Intro.tsx

import React from "react";
import IntroStyles from "../../styles/Intro.module.css";
import Image from "next/image";
import DownArrow from "../../public/images/down-arrow.png";

const Intro = () => {    
    return (
    	<button className={IntroStyles.intro_arrow}>
            <Image
                src={DownArrow}
                alt="down-arrow"
                width={40}
                height={40}
            />
        </button>
    )
}

 

Intro.module.css

.intro_arrow {
    background: none;
    border: none;
    cursor: pointer;
    animation: up-down 0.4s 0s ease infinite alternate;	
}
@keyframes up-down {
    0% {
        margin-top: 0px;
    } 
    100% {
        margin-top: 30px;
    } 
}