CSS 애니메이션과 전이: 웹페이지에 생동감 넣기

HTML&CSS

by 코드공작소 2023. 12. 20. 09:51

CSS 애니메이션과 전이는 웹페이지에 동적이고 생동감 있는 느낌을 더해주는 중요한 디자인 도구입니다. 이 블로그 포스팅에서는 다양한 예제를 통해 CSS 애니메이션과 전이를 구현하는 방법에 대해 자세히 알아보겠습니다.

1. CSS 전이(Transition)
CSS 전이는 속성의 변화에 부드럽게 효과를 적용하는 데 사용됩니다. 가장 간단한 예제로 버튼에 호버 효과를 추가해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 애니메이션과 전이: 웹페이지에 생동감 넣기</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <button class="transition-btn">Hover me</button>

</body>
</html>

/* styles.css */

.transition-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.transition-btn:hover {
  background-color: #2980b9;
}

이 예제에서는 버튼에 마우스를 올리면 배경색이 부드럽게 변화하는 효과를 적용했습니다. transition 속성을 사용하여 전환의 속성, 지속 시간, 타이밍 함수를 설정할 수 있습니다.

2. CSS 애니메이션(Animation)
CSS 애니메이션은 여러 프레임에 걸쳐 움직임을 지정하는 데 사용됩니다. 예를 들어, 원하는 동작을 지정한 후 이를 특정 요소에 적용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 애니메이션과 전이: 웹페이지에 생동감 넣기</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="animated-box"></div>

</body>
</html>

/* styles.css */

.animated-box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

이 예제에서는 .animated-box 클래스에 bounce 애니메이션을 적용했습니다. @keyframes를 사용하여 애니메이션의 각 단계를 지정하고, 이를 요소에 적용합니다.

3. 중첩과 시퀀스: CSS 애니메이션의 고급 활용
애니메이션을 중첩하거나 시퀀스로 구성함으로써 더 다양하고 복잡한 동작을 구현할 수 있습니다.

/* styles.css */

.parent-box {
  position: relative;
}

.child-box-1, .child-box-2 {
  width: 50px;
  height: 50px;
  position: absolute;
}

.child-box-1 {
  background-color: #3498db;
  animation: moveRight 2s infinite;
}

.child-box-2 {
  background-color: #e74c3c;
  animation: rotate 2s infinite;
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rotate {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
}

이 예제에서는 .parent-box 안에 .child-box-1과 .child-box-2를 중첩하여 각각 다른 애니메이션을 적용했습니다. 이를 통해 두 개의 요소가 각각 다른 동작을 수행하도록 만들었습니다.

4. 키프레임 제어 및 반복
애니메이션의 키프레임을 직접 제어하거나 반복 횟수를 조절할 수 있습니다. 아래 예제는 키프레임을 직접 제어하고 애니메이션을 3번 반복하는 예제입니다.

/* styles.css */

.custom-animation {
  width: 100px;
  height: 100px;
  background-color: #27ae60;
  animation: customMove 2s ease-in-out 3;
}

@keyframes customMove {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(200px);
  }
}

이렇게 하면 애니메이션이 3번 반복됩니다.

5. 애니메이션과 전이의 조합 활용
애니메이션과 전이를 조합하여 더 다양한 효과를 구현할 수 있습니다. 예를 들어, 버튼을 클릭할 때 글자색이 서서히 변하는 효과를 추가한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 애니메이션과 전

CSS Flexbox와 Grid: 레이아웃 디자인의 강력한 도구

CSS Flexbox와 Grid는 웹 디자인에서 강력하면서도 유연한 레이아웃을 구현하는 데 중요한 역할을 합니다. 이 블로그 포스팅에서는 각각의 특징과 활용법에 대해 자세히 알아보겠습니다. 1. Flexbox 소

jina102.tistory.com

효과적인 웹 디자인을 위한 CSS 레이아웃

웹 디자인에서 효과적인 레이아웃은 사용자 경험을 향상시키고 웹 페이지의 시각적인 품질을 결정짓습니다. 이번 포스팅에서는 CSS를 활용하여 효과적인 웹 디자인을 구현하는 방법에 대해 다

jina102.tistory.com

저작자표시

'HTML&CSS' 카테고리의 다른 글

CSS에서 흔히 발생하는 오류와 해결책 (0)	2023.12.20
Responsiveness를 갖춘 웹 디자인: CSS Media Queries 활용 (2)	2023.12.20
CSS Flexbox와 Grid: 레이아웃 디자인의 강력한 도구 (1)	2023.12.19
효과적인 웹 디자인을 위한 CSS 레이아웃 (0)	2023.12.19
CSS 시작하기: 기초 선택자와 속성 (0)	2023.12.19