CSS

[CSS] Animation

Puft 2025. 1. 24. 09:57

실습을 진행하다가

강사님께서 대뜸 처음 보는 HTML코드를 쓰셨는데

효과가 나타나서 신기했다.

 

<marquee behavior = "alternate">

숫자만 3자리, 중복숫자 X

</marquee>

 

좌우로 움직이는 효과인데 

GPT에게 CSS로 해당 코드를 짜려면 어떻게 하는지 물어봤다.

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Marquee Alternate Effect</title>

<style>

.marquee-alternate {

width: 300px; /* 컨테이너 너비 */

height: 50px; /* 컨테이너 높이 */

margin: 50px auto;

overflow: hidden;

position: relative;

background-color: #f0f0f0;

border: 2px solid #ddd;

}

 

먼저 Marque 문구가 들어갈 컨테이너를 만든다.

 

.marquee-content {

position: absolute;

width: fit-content;

animation: alternate-move 3s infinite alternate;

font-size: 20px;

color: #333;

}

 

animation이라는 속성을 사용하는데 

alternate-move라는 이름을 가진 키프레임을 구현해서

애니메이션 효과를 적용한다.

3s는 3초를 의미하고

infinite는 무한으로 실행,

alternate는 한 방향으로 쭉 갔다가,

다시 돌아오는 효과를 말한다.

 

@keyframes alternate-move {

0% {

left: 0;

}

100% {

left: calc(100% - 100px); /* 컨테이너 너비 - 텍스트 너비 */

}

}

 

다음으로 키프레임 코드를 살펴보면

0%와 100%가 있는데

0%는 시작지점,

100%는 끝지점을 의미한다.

이때 끝지점은 

 

 calc(100% - 100px); 

 

요소의 너비에서 텍스트 너비를

calc함수로 빼서

해당 애니메이션이

컨테이너 박스를 벗어나지 않게 한다.

 

추후에 알게되는 애니메이션을

정리해서 게시해보려고 한다.