[animation] loading - square 분석

2016. 9. 6. 22:12ㆍ[개발] 지식/Publish

Example : Square


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="square.css"></link>


</head>
<body>
  <div class="sk-cube-grid">
    <div class="sk-cube sk-cube1"></div>
    <div class="sk-cube sk-cube2"></div>
    <div class="sk-cube sk-cube3"></div>
    <div class="sk-cube sk-cube4"></div>
    <div class="sk-cube sk-cube5"></div>
    <div class="sk-cube sk-cube6"></div>
    <div class="sk-cube sk-cube7"></div>
    <div class="sk-cube sk-cube8"></div>
    <div class="sk-cube sk-cube9"></div>
  </div>
</body>
</html>
body {
  margin : 0;
  padding: 0;
  background: #d35400;
}

.sk-cube-grid {
  width: 100px;
  height: 100px;
  margin: 400px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #ddd;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;

}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 0);
  }

  0% 70% 100%{
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1,1,1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  }
}



Check Point


-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;

animation 속성에 4가지 파라미터가 들어가 있다.

순서대로 name, duration, iteration-count, timing-function 값이다.


따라서 이는 아래와 같이 풀어서 작성할 수 있다.

animation-name : sk-cubeGridScaleDelay;
animation-duration : 1.3s;
animation-iteration-count : infinite;
animation-timing-function : ease-in-out;

animation-name이란 말 그대로 애니메이션의 이름이다. 이는 개발자가 직접 명명할 수 있다.

animation-duration이란 애니메이션이 지속되는 시간을 뜻한다.

animation-iteration-count란 몇번 반복할건지를 나타낸다. 여기선 무한.

animation-timing-function에서 여러가지 효과를 줄 수 있다. ease-in-out은 시작할때와 끝날때 가속도가 붙는 효과이다.


그 아래 부분의 소스를 보자.

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

HTML 소스에서는 9개의 div를 생성했다. 이는 각각 개별적으로 움직이는 사각형을 의미한다.

위의 CSS 소스에서는 각각의 사각형들이 어느정도의 시간차를 두고 애니메이션을 시작할지를 결정한다. 

이렇게 시간차이가 존재하기 때문에 맨 위의 예제에서처럼 물결치는 효과를 생성할 수 있다.


마지막으로 keyframes 부분을 보자.

@-webkit-keyframes sk-cubeGridScaleDelay {
  35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 0);
  }

  0% 70% 100%{
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1,1,1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  }
}

keyframes에서는 위에서 지정한 animation-name으로 실제 구현할 애니메이션을 작성한다.

본 예제에서는 percentage에 따라 애니메이션을 세분화 해놓았다.

즉 0%, 70%, 100%의 진행상태에서는 scale3D(1,1,1) 효과를 주고, 35%의 진행상태에서는 scale3D(0,0,1)의 효과를 주었다.


scale3D란 x축, y축, z축의 방향으로 축소/확대 하는 애니메이션이다.

본 예제에서는 z축은 1로 고정한채 x축과 y축을 동시에 축소/확대함으로써 사각형이 줄어들었다가 늘어나는 효과를 연출했다.

이외에도 여러가지 효과가 있지만 일단 scale과 translate 애니메이션은 다음과 같이 사용한다.


traslatex(tx) : x축방향으로 tx만큼 이동

traslatey(ty) : y축방향으로 ty만큼 이동

traslatez(tz) : z축방향으로 tz만큼 이동

translate3d(tx,ty,tz) : 3방향을 한번에 지정


sacalex(tx) : x축방향으로 확대/축소

sacaley(ty) : y축방향으로 확대/축소

sacalez(tz) : z축방향으로 확대/축소

sacale3d(tx,ty,tz) : 3방향을 한번에 지정



저작자표시

'[개발] 지식 > Publish' 카테고리의 다른 글

IE에서 focus()가 정상적으로 처리되지 않는 현상  (0) 2017.05.17
[레이아웃] 레이아웃 잡기 (float)  (0) 2017.02.24
[layout] 왼쪽 가변 오른쪽 고정(불변) - 수정중  (0) 2016.11.11
부트스트랩 템플릿 코드  (0) 2016.08.03
layout 만들기  (0) 2016.07.15

관련글

댓글 0
<

티스토리툴바