CSS #9 (CSS3 애니메이션)

웹 페이지에 동적인 효과를 추가

 

변형(Transform) : 모양이나 위치를 변경 (크기, 위치, 회전 / 2D, 3D)

• rotate(): 요소를 회전시킴. 단위는 도(degrees).
• scale(): 요소의 크기를 확대하거나 축소.
• translate(): 요소를 X축과 Y축 방향으로 이동시킴.
• skew(): 요소를 기울임.
• matrix(): 2D 변형을 한 번에 정의하는 함수, 행렬을 사용하여 변형을 적용.
• transform-origin : 변형이 적용되는 기준점을 설정, 기본적으로 center center로 설정, 이 속성으로 기준점을 변경 가능
• perspective : 3D 변형 효과를 적용할 때 원근감을 설정. 이 속성은 부모 요소에 적용하여 자식 요소가 3D 효과로 변형될 때 깊이를 조정

div {
    transform: rotate(45deg);  /* 시계 방향으로 45도 기울임 */
}

div {
    transform: scale(1.5); /* 1.5배 확대 */
}

div {
    transform: translate(50px, 100px); /* 50px 오른쪽, 100px 아래로 이동 */
}

div {
    transform-origin: top left; /* 왼쪽 상단을 기준으로 변형 */
    transform: rotate(45deg);
}

.container {
    perspective: 500px;
}
.box {
    transform: rotateY(45deg);
}

 

 

 

트랜지션(Transition) : 스타일이 변경될 때 그 변화를 부드럽게 나타내는 효과

element {
    transition: property duration timing-function delay;
}

• property: 변화를 적용할 속성
• duration: 변화가 일어날 시간 (1s (1초), 500ms (500밀리초).)
• timing-function: 변화를 위한 타이밍 함수 (ease, linear, ease-in, ease-out, cubic-bezier 등)
• delay: 변화가 시작되기 전에 기다릴 시간

 

button {
    background-color: blue;
    transition: background-color 0.5s ease;
}

button:hover {
    background-color: red;
}

버튼의 배경색은 0.5초 동안 부드럽게 파란색에서 빨간색으로 변함.



div {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 1s, height 1s, background-color 1s;
}

div:hover {
    width: 200px;
    height: 200px;
    background-color: red;
}

div 요소는 마우스를 올리면 크기와 색상이 부드럽게 변경

 

 

 

애니메이션(Animation) : 시간에 따라 변하는 스타일을 정의 가능

• @keyframes 규칙 : 애니메이션의 상태를 정의 (시작, 중간, 끝)

@keyframes animation-name {
    from {
        /* 초기 상태 */
    }
    to {
        /* 끝 상태 */
    }
}

  @keyframes example {
      0% { background-color: red; }
      50% { background-color: yellow; }
      100% { background-color: green; }
  }

• animation 속성 : 속성으로 애니메이션을 적용 (이름, 지속 시간, 타이밍 함수, 반복 여부 등을 설정)

element {
    animation: animation-name duration timing-function delay iteration-count direction;
}

 

 

예시

@keyframes move {
    from {
        left: 0;
    }
    to {
        left: 100px;
    }
}

div {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    animation: move 2s infinite alternate;
}

div 요소는 2초 동안 좌측에서 우측으로 이동하며, 무한 반복되고 애니메이션 방향이 바뀌는 효과

 

 

 

 

실습

 

사진에 마우스를 올리면, 중앙 하단에 가격 표시, 떼면 서서히 사라지는 효과

 

See the Pen Untitled by Cheolho Jang (@chiro-J) on CodePen.

 

 

 

요약

1. 변형 (Transform): CSS transform 속성을 사용하여 요소의 회전, 크기 조정, 이동, 기울기 등을 적용할 수 있습니다.
2. 트랜지션 (Transition): 요소의 스타일 변화가 부드럽게 이루어지도록 하는 속성으로, 상태 변화 시의 변화를 시간을 두고 적용합니다.
3. 애니메이션 (Animation): @keyframes를 사용하여 요소의 스타일 변화를 지속적이고 반복적으로 적용할 수 있습니다.
4. 상품 페이지 가격 애니메이션: CSS 애니메이션을 사용하여 상품 페이지에서 가격이 떠오르는 효과를 만들 수 있습니다.