ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • css태그정리:transition등_210402(금)
      HTML&CSS 2021. 7. 21. 23:31

      #transition

      서서히 변하는 애니메이션 효과.

      ☆속성

      *transition-property: 대상 설정

      -none | all | 특정대상

      ​

      *transition-duration:진행 시간

      ​

      *transition-timing-fuction: 속도감

      linear:

      -ease-in: 느리게 시작

      -ease-out:느리게 끝

      ​

      *transition-delay:지연시간(시작전 지연시간)

       

      #animation

      @keyframes 속성

      -from: 시작점

      -to: 끝점

      -50%: 중간점(%로 지정가능)

      ​

      @keyframes 이름{

      from(직접 지정가능){

      시작모양

      }

      to(직접 지정가능){

      끝모양

      }

      }

      애니메이션을 설정하고

      - animation-name: (keyframes 의)이름

      지정시 애니메이션 사용가능

      ​

      ☆속성

      - @keyframes

      - animation-name:이름

      - animation-duration:실행 시간

      - animation-delay: 시작 시간

      - animation-direction:종료후 ,처음부터 아님 역방향으로 진행할지 지정

      - animation-iteration-count:반복 횟수

      - animation-timing-function:키프레임의 전환 형태를 지정

      - animation: 위의 속성값 다 지정가능

      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
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      98
      99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      <!DOCTYPE html>
      <html lang="en">
       
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/prefixfree.min.js"></script>
        <style>
          body {
            display: flex;
            flex-flow: column wrap;
          }
       
          section {
            margin: 20px;
          }
       
          div {
            width: 200px;
            height: 200px
          }
       
          .container {
            border: 1px solid black;
            perspective: 300px;
            margin-top: 100px;
            margin-left: 100px;
            float: left;
          }
       
          .box {
            background-color: blue;
            transform: rotateY(135deg);
          }
       
          #back1 {
            backface-visibility: hidden;
          }
       
          #back2 {
            backface-visibility: visible;
          }
       
          #ex1 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            border: 1px solid gray;
            transition-property: width, height, background-color, transform;
            transition-duration: 2s, 3s, 2s, 3s;
            transition-timing-function: ease-in-out;
          }
       
          #ex1:hover {
            background-color: rgb(23, 14, 99);
            width: 200px;
            height: 120px;
            transform: rotate(180deg);
          }
       
          #out {
            position: relative;
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid gray;
            border-radius: 30px;
            padding: 20px;
          }
       
          #out:hover .box1 {
            transform: rotate(720deg);
            margin-left: 250px;
          }
       
          .box1 {
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background-color: wheat;
            border: 1px solid gray;
          }
       
          #no-delay {
            transition-duration: 3s;
          }
       
          #delay {
            transition-duration: 3s;
            transition-delay: 1s;
          }
       
          #ani1 {
            width: 200px;
            height: 200px;
            background-color: indianred;
            animation-name: change-shape;
            animation-duration: 2s;
          }
       
          @keyframes change-shape {
            form {
              background-color: lightseagreen;
              border: 1px solid black;
            }
       
            to {
              background-color: magenta;
              border-radius: 50%;
            }
          }
          
        </style>
      </head>
       
      <body> 
       
        <section>
          <div id="out">
            <div id="ani1"></div>
          </div>
        </section>
        <section>
          <div class="container">
            <div class="box" id="back1">
              <h1>Back</h1>
            </div>
          </div>
          <div class="container">
            <div class="box" id="back2">
              <h1>Back</h1>
            </div>
          </div>
        </section>
       
        <section>
          <div class="box" id="ex1"></div>
        </section>
       
        <section>
          <div id="out">
            <div id="no-delay" class="box1">
              <p>no-delay</p>
            </div>
            <div id="delay" class="box1">
              <p>delay</p>
            </div>
          </div>
        </section>
       
      </body>
       
      </html>
      		 cs

      'HTML&CSS' 카테고리의 다른 글

      HTML에 대한 이해_210406(화)  (0) 2021.07.21
      css태그정리:transform등_210401(목)  (0) 2021.07.21
      css태그정리:포지셔닝_210331(수)  (0) 2021.07.21
      css태그정리_210330(화)  (0) 2021.07.21
      HTML강의(visual studio code), 기초태그_210329(월)  (0) 2021.07.21

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바