CSS 요소 변화(transform, transition, 애니메이션)

Jerry95 2024. 4. 10. 17:56

2024. 4. 10. 17:56

1. transform

transform 하기 전의 원본 상태였던 요소의 자리는 유지한 상태 일어남

기본값은 none
함수를 사용하여 요소를 변형시킴
오른쪽에서 왼쪽으로 적용됨(transform: rotate(45deg) scale(0.5))
- 먼저 scale이 적용되고 rotate가 적용
2d, 3d로 모두 변형 가능(x, y, z축)

1-1) scale : 크기조절

2d로 크기 조절
기본값은 scale(1)
사용방법
- scale(sx) : x축을 입력받을 수 있음
- scale(sx, sy) : x,y축을 동시에 입력받을 수 있음
```
<style>
  #myImg{
    width: 40px;
    transform: scale(0.5)
}
</style>
<body>
  <img id="myImg" src="myImg.jpg">
<div>Lorem Ipsum</div>
</body>
```
- transform의 scale로 크기를 줄였다고 하더라도 img태그의 width는 여전히 40px
- width의 값은 변화 없음

1-2) rotate : 회전

rotate(a) : 값은 1번만 받을 수 있음

1-3) translate : 이동

양수, 음수 모두 입력 가능
translate(tx) : 하나의 값만 입력하면 x축으로 이동
- translate(200px)은 translate(200px, 0)을 입력한 것과 동일
translate(tx, ty) : x,y축을 동시에 입력받을 수 있음
값이 양수일 때 x축은 오른쪽으로 이동, y축은 아래로 이동

1-4) skew : 기울이기

skew(ax) : x축으로만 입력
skew(ax, ay) : x,y축을 동시에 입력받을 수 있음

2. transform-origin

기준점을 변경할때 사용

기본값 : transform-origin : 50% 50%(center)

기본값 상태에서 transform scale을 1.5로 주면, 상하좌우가 동일하게 확대됨

<style>
    #myImg{
      width: 40px;
      transform: scale(0.5)
      transform-origin: top left;
  }
</style>
<body>
    <img id="myImg" src="myImg.jpg">
  <div>Lorem Ipsum</div>
</body>

3. transition

전환되는 상태를 눈에 보여주는 것

3-1) transition-property, transition-duration

1) transition-property : 바꿀 요소의 속성을 결정

all 사용시 전체 속성을 transition 항목으로 선택

2) transition-duration

바뀔 요소가 얼마간의 시간을 두고 바꿀것인지 결정

<style>
   .box{
      width: 300px;
      height: 90px;
      border: 2px dashed teal;
      font-size: 50px;
      color: white;

      transition-property: all;
      // transition-property: background-color;
      transition-duration: 1s;
  }
  .box:hover{
      background-color; indianred;
      color: black;
      font-size: 60ox;
      width: 350px;
  }
</style>
<body>
   <div class="box">Hover me!</div>
</body>

3-2) transition-delay, transition-timing-function

1) transition-delay : 요소가 여러개 일때 도미노처럼 차례대로 변할 수 있도록 처리할때 주로 사용
2) transition-timing-function

transition이 될때 중간 과정이 존재(배경색을 빨강에서 파랑으로 변화시킬때 duration에 따라 중간에 보라새으로 보이기도 함)

중간과정의 시간을 순차적으로 보여줄지, 앞부분을 빠르게 뒷부분을 천천히 보여줄지 등을 결정

<style>
.box{
    width: 300px;
    height; 40px;
    border: 2px solid black;
    background-color: skyblue;
    color: white;
    font-size: 50px;

    transition-porperty: all;
    transition-duration: 3s;
    transition-delay: 1s;
    transition-timing-function: ease-in;
}
.box:hover{
    background-color: red;
    height; 400px;
}
</style>
<body>
<div class="box">HI THERE</div>
</body>

4. transfrom + transition

<style>
    .box{
        width: 100px;
        height; 100px;
        border: 10px solid seagreen;
        border-radius: 30px;
        background-color: skyblue;

        font-size: 50px;

        transition: all 1s ease-in-out;
    }
    .box:hover{
        transform: rotate(360deg);
        transform-origin: bottom right;
        height; 400px;
    }
</style>
<body>
    <div class="box">HI THERE</div>
</body>

5. 애니메이션

유저의 액션이 없이도 요소가 변화, 다수의 애니메이션 세트를 만들어 사용할 수 있음

5-1) @keyframes

transition(기본상태 A에서 새로운 스타일 B로의 변화만 다룸)과 다르게 여러개의 스타일 세트((A-B-C-D))를 keyframes라는 개념으로 분리하여 작성 가능

중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정

<style>
  .box{
      width: 100px;
      height; 100px;
      border: 10px solid seagreen;
      border-radius: 30px;
      background-color: skyblue;

      animation: my-first-animation 5s infinite;
  }
  @keyframes my-first-animation{
      0% { 
          font-size: 20px; 
      }
      50% { 
          width: 200px;
          font-size: 70px; 
      }
      100% {
          font-size: 20px; 
      }

  }
</style>
<body>
  <div class="box">😅</div>
</body>

5-2) animation-name, animation-duration

animation-name : keyframes의 이름
- 기본값은 none
animation-duration : animation의 한 cycle을 완료하는데 걸리는 시간
- 음수값은 불가

5-3) animation-delay, animation-timing-function

animation-delay : 지연시간으로 음수 가능
- 음수 사용시 즉시 시작되지만, 애니메이션 주기의 도중에 시작

animation-timing-function : linear, ease-in, ease-out 등

<style>
  div{
      width: 100px;
      height; 100px;
      border: 10px solid grey;
      border-radius: 30px;

      animation; my-first-animation 1s infinite;
  }
  .box1{
      background-color: orange;
      animation-delay: -0.3s;
  }
  .box2{
      background-color: skyblue;
      animation-delay: 0.3s
  }
  .box3{
      background-color: seagreen;
      animation-delay: 0.6s
  }

  @keyframes my-first-animation{
      0% { 
          font-size: 20px; 
      }
      50% { 
          width: 300px;
          font-size: 40px; 
      }
      100% {
          font-size: 20px; 
      }

  }
</style>
<body>
  <div class="box1">😅</div>
  <div class="box2">😅</div>
  <div class="box3">😅</div>
</body>

5-4) animation-iteration-count, animation-direction, animation-play-state

animation-iteration-count : 반복횟수를 설정(기본값은 1)
animation-direction : transition은 A에서 B상태로 변화하기 때문에 단방향이었고 방향이 존재하지 않음
- reverse: 거꾸로 진행
- alternate : 시계방향으로 진행후, 반시계방향으로 진행

animation-play-state : 기본값은 running, 다른 값은 paused

<style>
  div{
      width: 100px;
      height; 100px;
      border: 10px solid grey;
      border-radius: 30px;
      background-color: orange;
  }
  .box1{
      animation-name: rotate;
      animation-duration: 3s;
      animation-timing-function; linear;
      animation-iteration-count: infinite;
      animation-direction: alternate
      animation-play-state: paused;
  }
  .box1:hover{
      animation-play-state: running;
  }
  @keyframes rotate{
      from {
          transform: rotate(0)
      }
      to {
          transform: rotate(360deg)
      }
  }
</style>
<body>
  <div class="box1">😅</div>
</body>

5-5) animation-fill-mode : 애니메이션의 실행 전과 후의 대상에 스타일을 적용하는 방법 설정

none : keyframes에 정의된 style을 애니메이션 시작 전, 후에적용하지 않음(본인이 가진 style만 적용하고 animation이 실행될때만 keyframes의 값을 사용)
forwards : 실행된 에니메이션의 마지막 keyframes를 유지(기존스타일로 돌아가지 않음)
backwords : 애니메이션이 시작할때, keyframes로 시작(기존스타일을 사용하지 않음)
both : 애니메이션이 적용된 요소를 keyframes의 1단계로 시작, 끝날때는 3단계로 종료
```
<style>
  div{
      width: 100px;
      height; 100px;
      border: 10px solid grey;
  }
  .box1{
      background-color: yellowgreen;
      animation: fill-mode 3s linear 1s;
      animation-fill-mode: forwads;

  }
  .box1:hover{
      animation-play-state: running;
  }
  @keyframes fill-mode{
      0{
          background-color: red
      }
      50% {
          width: 200px;
      }
      100% {
          background-color: black

      }
  }
</style>
<body>
  <div class="box1">안녕하세요😅</div>
</body>
```
- 만약 animation-fill-mode를 설정하지 않는다면, 애니메이션의 단계는 3단계로 나뉨
  1) 기존에 정해진 스타일: 배경색이 yellowgreen
  2) 애니메이션 진행단계
  - keyframes 첫번째
  - keyframes 진행중
  - keyframes 마지막
  3) 기존 스타일로 돌아옴
- forwords 사용시 기존스타일로 돌아가지 않고 keyframse의 마지막에서 멈춤
- backwords 사용시 keyframes 첫단계부터 시작(기존스타일에서 시작하지 않음)

'Dev-log > CSS' 카테고리의 다른 글

CSS 레이아웃2(flex, grid) (0)	2024.04.10
CSS 레이아웃 (0)	2024.04.09
CSS Box Model (0)	2024.04.08
CSS 상속&속성 (0)	2024.04.07
CSS 기초 & 선택자 (1)	2024.04.07

jerry