티스토리 뷰

CSS

[HTML/CSS] Transition

baegofda_ 2020. 8. 2. 17:33

* transition - 동작과 애니메이션시 딜레이 등등 설정이 가능하다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/transition -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function -->
    <!-- https://cubic-bezier.com/ -->
    <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>
</html>

* 링크 참고

저작자표시

'CSS' 카테고리의 다른 글

💡 CSS 란 무엇일까?  (0) 2020.11.04
[HTML/CSS] Custom Properties  (0) 2020.08.06
[HTML/CSS] background  (0) 2020.08.02
[HTML/CSS] box, text 정렬하기 ( margin, text-align, translate, text centering)  (0) 2020.08.02
[HTML/CSS] Input type="date" placeholder 없애기  (0) 2020.07.30
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함