728x90

transform

: 요소의 크기나 위치를 바꿈. x축과 y축 기준

  • translate(x, y): 지정한 크기만큼 x축, y축으로 이동
  • scale(x, y): 지정한 크기만큼 x축, y축으로 확대 및 축소
  • skew(x, y): 지정한 크기만큼 x축, y축으로 왜곡
  • rotate(x, y): 지정한 각도만큼 회전
  <style>
    .parent {
      display: inline-block;
      margin: 0 20px;
    }
    .child {
      width: 150px;
      height: 150px;
      background-color: teal;
    }
    .parent:first-child>.child { transform: translate(30px, 50px); }
    .parent:nth-child(2)>.child { transform: scale(1, 1.5); }
    .parent:nth-child(3)>.child { transform: skew(45deg); }
    .parent:nth-child(4)>.child { transform: rotate(45deg); }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
  </div>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

transition

: 요소에 저장된 스타일을 다른 스타일로 변화. 변화하는 시간이나 속도 등을 추가할 수 있어 애니메이션 효과를 만들 수 있음

  • transition-property: 변화 대상 속성 지정
  • transition-duration: 변화 진행 시간 지정
  • transition-delay: 변화 시작 전 지연 시간 지정
  • transition-time-function: 변화 진행 속도 곡선 지정
    • ease: 기본값. 천천히 시작하고 점점 빨라지다가 천천히 끝냄
    • linear: 처음부터 끝까지 같은 속도
    • ease-in: 느리게 시작
    • ease-out: 느리게 끝남
    .parent:nth-child(4)>.child:hover {
      width: 300px;
      height: 300px;
      background-color: orange;
      /* transition-property: width;
      transition-duration: 5s;
      transition-delay: 1s;
      transition-timing-function: ease; */
      transition: width 5s 1s ease;
    }
728x90

애니메이션

  • @keyframes: 애니메이션을 표현하는 프레임
  • animation-name: 적용할 키프레임 이름
  • animation-duration: 애니메이션 지속 시간
  • animation-dalay: 애니메이션 시작 전 시간
  • animation-timing-function: 속도 그래프
  • animation-deraction: 동작 진행 방향
  • animation-iteration-count: 반복 횟수
  • animation-fill-mode: 전후 상태 설정
  • animation-play-state: 애니메이션 적용 여부
  <style>
    .eyes {
      width: 500px;
      margin: auto;
    }
    .eye {
      width: 200px;
      height: 200px;
      border: 5px solid #000;
      border-radius: 50%;
      position: relative;
    }
    .eye:nth-child(1) {
      float: left;
    }
    .eye:nth-child(2) {
      float: right;
    }
    .ball {
      width: 50px;
      height: 50px;
      background-color: #000;
      border-radius: 50%;
      position: absolute;
      top: 80px;
      left: 30px;

      /* animation-name: moving;
      animation-duration: 2s;
      animation-delay: 0s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate; */
      animation: moving 2s linear 0s infinite alternate;
    }
    @keyframes moving {
      from {
        left: 30px;
      }
      to {
        left: 120px;
      }
    }
  </style>
</head>

<body>
  <div class="eyes">
    <div class="eye">
      <div class="ball"></div>
    </div>
    <div class="eye">
      <div class="ball"></div>
    </div>
  </div>
</body>

728x90

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

[CSS] 반응형 웹과 미디어쿼리  (0) 2025.04.17
[CSS] 연결 선택자, 속성 선택자, 가상 클래스, 가상 요소  (0) 2025.04.15
CSS 레이아웃 관련 속성  (0) 2025.04.15
CSS 배경, 텍스트 관련 속성  (0) 2025.04.15
CSS 박스 모델  (0) 2025.04.14

티스토리툴바