꿈소년의 개발 이야기

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 14 트랜지션과 애니메이션 본문

Do it 스터디!

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 14 트랜지션과 애니메이션

꿈소년 2026. 2. 3. 22:21
반응형

DAY 21

🔖 오늘 읽은 범위 :

☃️2/2(월) 진도표 알림
❄️공부 내용: 14 트랜지션과 애니메이션
❄️ 쪽수: 451~483쪽

  • 웹 요소를 움직이기
  • 예전에는 자바스크립트로 처리 했으나, 지금은 CSS 로 가능함.

트랜스폼 알아보기

  • 물체의 크기나 형태를 바꾸는 것 = Transform
  • 요소의 이동, 회전, 왜곡 등등 비교적 단순함이 있음.

transform 속성과 트랜스폼 함수 사용

  • 기본형 : transform: 함수
  • 웹 요소를 이동 시키는 함수 : translate()
  • .photo { transform: translate(50px,100px); }
  • 2차원 트랜스폼 : x, y 좌표 기준으로 수평 및 수직 방향 이동
  • 3차원 트랜스폼: x, y, z 좌표 기준. z축은 앞뒤로 이동함.

translate() : 웹 요소를 이동시킨다

  • x축이나 y축 또는 양방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기 만큼 이동한다.
  • .origin > div { width:100px; height:100px; background-color:orange; transition: 1s; /* 부드럽게 이동하도록 설정 */ } #movex:hover { transform: translateX(50px); /* x축으로 50px 이동 */ } #movey:hover { transform: translateY(20px); /* y축으로 20px 이동 */ } #movexy:hover { transform: translate(10px, 20px); /* x축으로 10px, y축으로 20px 이동 */ } #movexyz:hover { transform: translate(10px, 20px); /* x축으로 10px, y축으로 20px 이동 */ } #movexyz:hover { transform: translate3d(10px,20px,-30px); /* 3D 이동 */ }
  • translate() 함수로 중앙에 배치하기
  • /* 가로 방향 중앙에 배치하기 */ .parent { ...... position:relative; } .child { position:absolute; left:50%; /* 부모 요소 너비의 50% 위치에 놓기. */ transform: translateX(-50%); /* 자식 요소 너비의 50% 만큼 왼쪽으로 이동. */ } /* 가로와 세로 방향으로 모두 중앙에 배치하기 */ .parent { ...... position:relative; } .child { position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }

scale() : 요소를 확대/축소한다

  • 웹 요소를 지정한 크기만큼 확대하거나 축소한다.
  • 값이 1보다 크면 확대, 1보다 작으면 축소.
  • 값이 하나일 경우, x축과 y축 모두 적용 됨.
  • scale() 함수를 사용해 확대 축소하기
  • .origin > div { width:100px; height:100px; background-color:orange; transition: 1s; /* 부드럽게 확대/축소하도록 설정 */ } /* Do it! scale 함수로 확대,축소하기 */ #scalex:hover { transform:scaleX(2); /* x축으로 2배 확대 */ } #scaley:hover { transform: scaleY(1.5); /* y축으로 1.5배 확대 */ } #scale:hover { transform: scale(0.7); /* 0.7배 축소 */ }

rotate() 함수 : 요소를 회전시킨다

  • 2차원 회전 : rotate(degree)
    • 각도 또는 래디안 사용.
    • 회전 각도가 양수이면 오른쪽 회전, 음수이면 왼쪽 회전.
    • #rotate1 { transform: rotate(40deg); } #rotate2 { transform: rotate(-40deg); }
  • 3차원 회전 + perspective 속성
    • 부모 요소에 perspective 속성과 함께 사용하면 원근감을 추가해서 회전을 입체적으로 표현 가능함. 
      /* 이미지 회전하며 원근감 주기 */
<head>
  ......
<style>
  .origin{
          width:152px;
          height:180px;
          border:1px solid black;
          margin:30px;
          float:left;  
  }
  .origin > div {
    width:152px;
    height:180px;
          transition: 1s; /* 부드럽게 회전하도록 설정 */
  }
  .rotatex:hover {
    transform: rotateX(50deg);  /* x축으로 50도 회전 */ 
  }
      #pers {
          perspective: 300px; /* 원근감 설정 */
      }
  </style>
</head>
<body>
  <div class="origin">
      <div class="rotatex">
          <img src="images/sunset.jpg" alt="">
      </div>
  </div>
  <div class="origin" id="pers">
      <div class="rotatex">
          <img src="images/sunset.jpg" alt="">
      </div>
  </div>
</body>
    • /* 기본형 */ rotate(rx, ry, degree) rotate3d(rx, ry, rz, degree) rotateX() rotateY() rotateZ()

rotate() 함수를 사용한 3차원 회전하기

#container{
  width:800px;
  margin:20px auto;
}
.origin {
  width: 100px;
  height: 100px;
  margin: 40px;
  float: left;
  border: 1px solid black;
  /* 원근감 추가하기  */
  perspective: 200px;
}
.origin > div {                
  width:100px;
  height:100px;
  background-color:orange;
  /* 트랜지션 효과 추가하기 */
  transition: all 3s;
}

/* 각 요소에 rotate 함수 적용하기 */
#rotatex:hover {
  transform: rotateX(55deg);
}
#rotatey:hover {
  transform: rotateY(55deg);
}
#rotatez:hover {
  transform: rotateZ(55deg);
}
#rotatexyz:hover {
  transform: rotate3d(2.5, 1.2, -1.5, 55deg);
}

skew() : 요소를 비틀어 왜곡하기

  • 지정한 각도만큼 요소를 비틀어 왜곡한다.
  • 양쪽 방향 또는 한쪽 방향으로 비틀 수도 있다.
  • skew() 에서 첫번째 는 X축, 두번째는 Y축 값인데, 값이 하나일 경우에는 y축 각도 0 으로 간주한다.
  • #skewx { transform: skewX(30deg); } #skewy { transform: skewY(15deg); } #skewxy { transform: skew(-25deg, -15deg); }

트랜지션 알아보기

  • 트랜지션 : 이 스타일 → 저 스타일로 바뀐다. 스타일의 변화. 애니메이션.

트랜지션 transition

  • 웹 요소의 스타일 속성이 바뀌는 것.
  • 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것

트랜지션 속성

종류 설명
transition-property 트랜지션 대상 지정.
transition-duration 트랜지션 진행 시간 지정.
transition-timing-function 트랜지션 속도 곡선 지정.
transition-delay 트랜지션 지연 시간 지정.
transition 트랜지션 관련 속성 한꺼번에 지정함.
  • transition-property
    • 트랜지션의 대상을 지정한다.
    • transition-property: all | none | <속성 이름>
    • 속성값
      종류 설명
      all 이 값을 사용하거나 생략할 경우, 요소의 모든 속성이 트랜지션 대상이 됨. 기본값.
      none 트랜지션을 하는 동안 아무 속성도 변화 없음.
      속성 이름 트랜지션 효과가 적용될 속성이 지정됨. 여러 개일 경우 쉼표로 구분해서 나열.
  • transition-duration
    • 트랜지션 진행 시간 지정. 자연스러운 애니메이션 효과 만들기.
    • transition-duration: <시간>
    • 초 또는 밀리초.
    • 속성 대상이 여러 개인 경우, 진행 시간도 쉼표로 구분해서 여러 개 지정 가능함.
  • transition-timing-function
    • 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 속도 구간을 생성한다.
    • 미리 정해진 키워드 또는 베지에 곡선
    • transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
    • 속성 값
      종류 설명
      ease 처음에는 천천히 시작, 점점 빨라지다가 마지막엔 천천히 끝남. 기본값.
      linear 시작부터 끝까지 동일한 속도로 진행함.
      ease-in 느리게 시작함.
      ease-out 느리게 끝남.
      ease-in-out 느리게 시작하고 느리게 끝남.
      cubic-bezier(n, n, n, n) 베지에 함수를 정의함(0 ≤ n ≤ 1).
  • transition-delay
    • 트랜지션 효과를 언제부터 시작할 것인지를 설정함.
    • 지정한 시간만큼 기다렸다가 트랜지션이 시작함. 초 또는 밀리초 단위. 기본값은 0.
    • transition-delay: <시간>
  • transition
    • 전체 대상에 적용하고 각각의 진행 시간이 같을 경우 한꺼번에 지정하면 편리하다.
    • transition: <transition-property> | <transition-duration> | <transition-timing-function> | <transition-delay>
    • 속성값을 작성하는 순서는 상관없음.
      • 주의) 시간 값 속성은 앞에 오는 것은 transition-duration , 뒤에 오는 것은 transition-delay 로 간주한다.

애니메이션 알아보기

CSS 애니메이션 속성

  • 자바스크립트를 이용하지 않고 애니메이션 추가.
  • 특정 지점에서 스타일을 바꾸면서 애니메이션을 만듬.
  • 키프레임(keyframe) : 애니메이션 중간에 스타일이 바뀌는 지점.
    속성 설명
    @keyframe 애니메이션 변경 지점 지정.
    animation-delay 애니메이션 지연 시간 지정.
    animation-direction 애니메이션 종료 후 동작 지정. 처음부터 다시 시작 또는 역방향 진행.
    animation-duration 애니메이션 실행 시간 지정.
    animation-iteration-count 애니메이션 반복 횟수 지정.
    animation-name 키프레임으로 설정해 놓은 애니메이션 지정.
    animation-timing-function 키프레임의 전환 형태 지정.
    animation 애니메이션 속성 모두 지정.
  • @keyframe, animation-name
    • 애니메이션 시작과 끝을 포함해서 상태가 바뀌는 부분이 있을 경우, 키프레임 속성을 이용해서 그 지점을 설정함.
    • @keyframe <이름> { <키프레임선택자> { <스타일> } }
    • <키프레임선택자> : 애니메이션 중간 단계 정의. 중간 단계 없이 시작과 끝 부분만을 지정하고 싶다면, from 과 to 키워드를 사용한다.
  • animation-duration 속성
    • 애니메이션을 얼마 동안 재생할 것인지를 설정한다.
    • 애니메이션 효과가 얼마나 빨리 또는 느리게 재생될지를 제어한다.
    • animation-duration: <시간>
    • 기본값은 0. 애니메이션이 실행되지 않음. 초 단위, 밀리초 단위. 1초는 1,000밀리초.
  • animation-iteration-count
    • 애니메이션 반복 횟수 지정.
    • /* 반복 횟수 또는 무한 반복 */ animation-iteration-count: <숫자> | infinite
  • animation-direction
    • 키프레임에서 from , to 순서로 진행.
    • 진행 방향을 바꿀 수 있음.
    • animation-direction: normal | reverse | alternate | alternate-reverse
    • 속성값
      종류 설명
      normal 애니메이션 from → to 로 진행. 기본값.
      reverse 애니메이션 방향을 반대로 to → from 으로 진행.
      alternate 홀수번째는 normal, 짝수번째는 reverse 로 진행.
      alternate-reverse 홀수번째는 reverse, 짝수번째는 normal 로 진행.
  • animation-timing-function
    • 애니메이션 속도 곡선 지정.
    • 애니메이션 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만든다.
    • 트랜지션 타이밍 펑션과 마찬가지임.
  • animation
    • 한꺼번에 애니메이션 속성을 표기.
    • 애니메이션 실행 시간은 지정하지 않으면 기본값은 0이 적용되어 애니메이션 효과를 볼 수 없음.
/* box 에 어떤 애니메이션을 적용할 것인지 지정. */
.box {
    ......
    animation-name: slideRight;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* 애니메이션 이름은 slideRight, 첫 위치는 0, 마지막 위치는 500px 로 지정. */
@keyframe slideRight {
    from { transform: translateX(0); }
    to { transform: translateX(500px); }
}

/* box 에 어떤 애니메이션을 적용할 것인지 지정. */
.box {
    ......
    animation: moving 3s alternate infinite ease-in;
}

/* 애니메이션 2개 한꺼번에 지정하기. */
.box {
  width: 100px;
  height: 100px;
  margin: 60px auto;      
  animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}

/* 0도 -> x축 -180도 회전 -> y축 -180도 회전하는 애니메이션 정의하기 */
@keyframes rotate {  
  from { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(120px) rotateX(-180deg) rotateY(0deg); }
  to { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

/* 배경색을 빨강 -> 초록 -> 파랑순으로 바꾸는 애니메이션 정의하기 */
@keyframes background {  
  from { background-color: red; }
  50% { background-color: green }
  to { background-color: blue; }
}
  • 애니메이션 속성 각각은 어렵지 않음.
  • 조합해서 애니메이션 최종 결과물을 만들어야 할 때 상상하는 게 쉽지 않음.
  • 이런 건… 아무래도 AI 로 해줄 것 같긴 하다.

🤟소감 3줄 요약

  • 눈이 많이 내리네~
  • CSS 이제 끝~~!!!
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 15 자바스크립트와 첫 만남  (1) 2026.02.04
👍Do it! 웹 분야 도서 로드맵입니다.🫰  (0) 2026.01.31
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 13 CSS 고급 선택자(2)  (0) 2026.01.31
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 13 CSS 고급 선택자(1)  (0) 2026.01.31
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 12장 되새김 문제  (0) 2026.01.29
'Do it 스터디!' Related Articles more