[CSS] | Transition

강지현·2024년 2월 17일
CSS
0

CSS

목록 보기
14/15
post-thumbnail

1. Transition 속성

transition 은 전환이라는 의미입니다.

속성 값이 변할 때 더 부드럽게 전환할 수 있도록 도와줍니다.

2. Transition 함수

  • transition-property : 어떤 속성에 트랜지션 효과를 줄 것인지 지정

    • transition-property: <속성1>, <속성2>; 처럼 지정 가능

    • all : 모든 속성을 지정 (생략 가능)

    • none : 아무것도 지정하지 않음

  • transition-duration : 트랜지션 효과를 몇 초 동안 실행할 것인지 지정

  • transition-delay : 트랜지션 효과를 지정한 초만큼 기다렸다가 실행

  • transition-timing-function : 트랜지션이 시작하면서 끝날 때의 타이밍 => 속도를 지정하는 것

    • linear : 트랜지션의 시작과 끝의 속도가 일정

    • ease-in : 천천히 시작했다가 완료될 때 속도 증가

    • ease-out : 빨리 시작했다가 완료될 때 속도 감소

  • transition : 단축 속성 가능

✍ 코드

<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
     transform: trnaslate(10px, 10px);
    }
    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

👉 결과

🧐 box1 에 hover 를 했을 때, width: 200px 과 height: 200px 이 짠! 하고 등장

Transition-duration

transition-property 에서 어떤 속성에 트랜지션을 줄 것인지 지정합니다.

transition-duration 에서 트랜지션을 몇 초 동안 실행할 것인지 지정합니다.

✍ 코드

<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
     transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: width, height;
      transition-duration: 2s;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

👉 결과

🧐 transition 할 속성은 width 와 height

🧐 transition 지속 시간은 2초

Transition-delay

transition-delay 에서 트랜지션을 지정한 초만큼 대기 후 실행합니다.

✍ 코드

<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
     transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: width, height;
      transition-duration: 2s;
      transition-delay: 1s;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

👉 결과

🧐 transition 하기 전 대기하는 시간은 1초

Transition-timing-function

  • linear

    트랜지션의 시작과 끝의 속도가 일정합니다.

    ✍ 코드

    <head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
      transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: width, height;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: linear;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

    👉 결과

  • ease-in

    천천히 시작했다가 완료될 때 속도가 증가합니다.

    ✍ 코드

    <head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
      transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: width, height;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: ease-in;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

    👉 결과

  • ease-out

    빨리 시작했다가 완료될 때 속도가 낮아집니다.

    ✍ 코드

    <head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
      transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: width, height;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: ease-out;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

    👉 결과

그 외

  • hover 할 때, 색 변화를 주고자 하면

    ✍ 코드

    <head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
      transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: all;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: ease-out;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

    👉 결과

    🧐 transition-property 를 하나하나 작성하지 않아도 all 속성 사용 가능

  • hover 할 때, rotate 를 주고자 하면

    ✍ 코드

    <head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
      transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition-property: all;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: ease-out;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

    👉 결과

    🧐 box1 이 180도 회전

단축속성

✍ 코드

<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
      background-color: lightgray;
    }
    .outline, .box {
      width: 60px;
      height: 60px;
    }
    .outline {
      border: 3px solid yellow;
      margin: 0 auto;
      margin-top: 20px;
    }
    .box {
      background-color: blue;
    }
    .box1 {
     transform: trnaslate(10px, 10px);
    }
    .box1 {
      transition: width 2s;
    }
    .box1:hover {
      width: 200px;
      height: 200px;
      background-color: red;
      transform: rotate(180deg);
    }
  </style>
</head>
<body>
  <div class="outline">
    <div class="box box1"></div>
  </div>
  <div class="outline">
    <div class="box box2"></div>
  </div>
  <div class="outline">
    <div class="box box3"></div>
  </div>
  <div class="outline">
    <div class="box box4"></div>
  </div>
</body>

👉 결과

🧐 width 를 지우고 transition: 2s; 처럼 하면 default 값으로 all 이 적용되어서 모든 값에 트랜지션이 적용됩니다.

🧐 transition: 2s; 처럼 1번째 초 => transition-duration

🧐 transition: 2s 1s; 처럼 2번째 초 => transition-delay

🧐 transition: 2s 1s ease-out; 처럼 마지막 => transition-timing-function

profile
강지현
시작!!
이전 포스트

[CSS] | Transform

다음 포스트

[CSS] | Animation

0개의 댓글

관련 채용 정보