WEB LAB
    HTML/CSS 4.6 · 4부. 반응형과 움직임

    애니메이션

    계기 없이 스스로 움직이게 합니다. 움직임 줄이기 설정을 지킵니다.

    예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 중급
    개념 설명

    스스로 움직이는 것

    transition 은 값이 바뀔 때 그 사이를 잇습니다. 마우스를 올리는 것 같은 계기가 있어야 합니다.

    animation 은 계기 없이 스스로 움직입니다. 불러오는 중임을 알리는 표시, 화면에 나타나는 효과가 그렇습니다.

    최소 예제 · 편집 가능

    @keyframes 로 단계를 적습니다

    <p><span class="dot"></span> 불러오는 중</p>
<div class="card">나타나는 상자</div>
    /* 0% 에서 100% 까지 무엇이 변하는지 적습니다 */
@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #6e56cf;

  /* 이름 · 시간 · 흐름 · 되풀이 */
  animation: blink 1s ease-in-out infinite;
}

.card {
  background: #ece7fb;
  padding: 16px;
  border-radius: 8px;
  margin-top: 12px;
  animation: rise 0.4s ease-out;
}

    from·to 는 0%·100% 와 같습니다. 단계는 필요한 만큼 적을 수 있습니다.

    상세 사용법

    animation 의 값들

    style.css 
    /* 한 줄로 적을 때의 차례 */
animation: rise 0.4s ease-out 0.2s 1 both;
/*         이름  시간  흐름     지연  횟수 끝난 뒤 */

/* 따로 적어도 됩니다 */
animation-name: rise;
animation-duration: 0.4s;
animation-iteration-count: infinite;   /* 끝없이 */
animation-fill-mode: both;             /* 시작 전·끝난 뒤 모습을 유지 */

    fill-mode: both 를 잊기 쉽습니다. 없으면 애니메이션이 끝난 뒤 원래 모습으로 되돌아갑니다 — 나타나는 효과를 주었는데 끝나자마자 사라지는 일이 그것입니다.

    상세 사용법

    움직임을 줄여 달라는 설정

    화면이 움직이면 어지러움을 느끼는 사람이 있습니다. 그래서 운영체제에 "움직임 줄이기" 설정이 있고, CSS 에서 그것을 읽을 수 있습니다.

    style.css 
    /* 그 설정을 켠 사람에게는 움직임을 없앱니다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

    2.8 에서 !important 를 피하라고 했지만 여기는 예외입니다. 개별 규칙을 모두 이겨야 하는 자리이고, 이보다 뒤에 올 규칙도 없습니다.

    이 블록 하나를 스타일 파일 끝에 두는 것으로 충분합니다. 애니메이션을 쓰는 사이트라면 반드시 넣으십시오.

    상세 사용법

    무엇을 움직일 것인가

    움직여도 되는 것피할 것
    transform·opacitywidth·height·margin·top
    배치를 다시 재지 않습니다.매 순간 배치를 다시 재어 끊깁니다.

    움직임은 짧고 적게. 화면이 계속 움직이면 읽는 데 방해가 됩니다. 0.2~0.4초, 한 화면에 한두 개면 넉넉합니다.

    흔한 실수

    세 가지

    • 끝난 뒤 원래대로 돌아갑니다. animation-fill-mode: both 가 없는 것입니다.
    • prefers-reduced-motion 을 두지 않습니다. 어지러움을 느끼는 사람이 화면을 볼 수 없게 됩니다.
    • width 나 margin 을 움직입니다. 매 순간 배치를 다시 재어 끊겨 보입니다. transform 으로 바꾸십시오.
    실습 문제

    직접 해보기

    1. 옆에서 나타나는 알림 난이도 중

    알림 상자가 오른쪽에서 미끄러져 들어와 그 자리에 머무르게 하십시오. 움직임 줄이기 설정도 지켜야 합니다.

    오른쪽에서 들어오려면 translateX 를 양수에서 0 으로 보냅니다. 머무르게 하는 것은 fill-mode 입니다.
    @keyframes slide-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .toast { animation: slide-in 0.3s ease-out both; } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
    요약

    정리

    • @keyframes 에 단계를 적고 animation 으로 부릅니다.
    • fill-mode: both 가 없으면 끝난 뒤 되돌아갑니다.
    • prefers-reduced-motion 을 반드시 지킵니다.
    • 움직이는 것은 transform 과 opacity 뿐입니다.