CSS 정리 5

이진아·2020년 12월 13일

목록 보기

5/6

1. CSS Animation

css3에서는 @keyframe 규칙을 사용해 애니메이션 효과를 쉽게 적용할 수 있습니다.

animation-fill-mode :
애니메이션이 끝난 후 어떻게 처리할지 설정합니다.
-none : 아무처리도 하지 않습니다.
-forwards : 애니메이션이 키프레임이 100%에 도달했을 때 마지막 키프레임을 유지합니다.
-backwards : 애니메이션의 스타일을 애니메이션이 실제로 시작되기 전으로 되돌립니다.

animation-dirextion :애니메이션의 진행 방향을 정하는 속성입니다.
-reverse :반대 순서로 진행합니다.
-alternate : 정해진 순서로 진행했다가 다시 반대 순서로 진행합니다.
-alternate-reverse : 반대 순서로 진행했다가 다시 정해진 순서로 진행합니다.

animation-iteration-count :애니메이션이 몇 번 반복될지 설정합니다.
숫자 : 해당 숫자만큼 반복합니다.
infinite : 무한 반복합니다.

@keyframe
시작 : from, 0% ..
과정 : 10%, 20% ..
끝 : to,100% ..

perspective : 3d환경을 만들기위해 사용자의 관찰자 시점, 즉 투영점을 구체화해서 입체감을 부여하는 속성입니다. 스크린으로 부터 해당 픽셀만큼 떨어진 고셍서 관찰자가 있다는 것을 근거로 구성합니다.

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Animation</title>
          <style>
              .box {
                  margin-top: 50px;
                  margin-left: 100px;
                  padding: 20px;
                  height: 60;
                  animation-name: moveing;
                  animation-duration: 3s;
                  animation-iteration-count: infinite;
                  animation-direction: normal;
              }

              @keyframes moveing {
                  from {
                      width:  200px;
                      background-color: deepskyblue;
                      opacity: 0.5;
                      transform: scale(0.5) rotate(15deg);
                  }

                  to {
                      width: 400px;
                      background-color: deepskyblue;
                      opacity: 1;
                      transform: scale(1) rotate(0deg);
                  }
              }

          </style>
      </head>
      <body>
          <h2>Animation</h2>
          <div class="box">
              <h3>CSS3 Animation</h3>
          </div>
      </body>
      </html>