2022 04 26 CSS transition

hongwr·2022년 4월 25일
0

CSS

목록 보기
8/12
post-thumbnail

CSS

transition

애니매이션을 쉽게 만들 수 있는 요소.

transition-property = 어떤 property를 줄 것인지
transition-duration = 얼마나 딜레이를 줄 것인지
transition-timing-function = 어떤 식으로 animation을 줄 것인지.

이것을 축약하면

transition: property duration timing-function 순서

<style>
      .box {
        width: 100px;
        height: 100px;
        margin: 20px;
        background-color: pink;
      }

      .box1:hover {
        background-color: blueviolet;
        transition: background-color 300ms linear;
      }

      .box2:hover {
        border-radius: 50%;
        background-color: cornflowerblue;
        transition: all 2s ease;
      }

      .box3:hover {
        border-radius: 50%;
        transform: translateX(400px);
        background-color: cornflowerblue;
        transition: all 3s ease;
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </body>
profile
코딩 일기장

0개의 댓글