이 기사는

우선 달려가고 싶다.

삼(卍^o^)卍

↑이 부분을 애니메이션에서도 표현하고 싶다. 어쩌면 고속으로 왼쪽에서 오른쪽으로 흘러 가는 움직임은 없을 것이다.

조속히 만드는

HTML과 SCSS.

<div class="dululu">
  <div class="dululu__box">
    三(卍^o^)卍ﾄﾞｩﾙﾙﾙﾙﾙﾙﾙﾙ
  </div>
</div>

.dululu 안에 .dululu__box 를 넣고 그 안에 三(卍^o^)卍 를 넣었어.

.dululu{
  width:500px;
  font-family:sans-serif;
  &__box{
    animation: idou 2s linear infinite;
  }
}

@keyframes idou{
  0% { transform:translateX(0%); }
100% { transform:translateX( 100%); }
}

.dululu 의 width를 결정하고 그 안을 .dululu__box 가 달려가도록 한다.

그래서 .dululu__box 에 @keyframes 를 지정하자!

이번에는 0%→100%로 가로(translateX)로 100% 이동하는 @keyframes 를 idou

덧붙여서 지정의 의미는 각각 이런 느낌이다.

에서이 녀석을 .dululu__box로 지정하십시오.
2s 라는 것은 2초의 일. 즉, 2초간 왼쪽에서 오른쪽으로 세(卍^o^)비가 달리게 되었다.

손을 돌리다

그럼, 손을 돌리기 위해서는 卍 이 부분에 클래스를 붙여야 하는 것이다.

즉 HTML은 이렇게.

<div class="dululu">
  <div class="dululu__box">
  三(<span class="manji">卍</span>&nbsp;^o^)<span class="manji">卍</span>ﾄﾞｩﾙﾙﾙﾙﾙﾙﾙﾙ
  </div>
</div>

뭔가 엉망으로 잘 모르겠지만,

우선 卍 를 <span> 태그로 둘러쌉니다.

손을 빙글빙글하는 SCSS

손 부분의 SCSS는 이렇게 한다.

.manji{
  display:inline-block;
  animation: guruguru 0.5s linear infinite;
}

@keyframes guruguru{
    0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

애니메이션 이외에, display:inline-block; 의 지정을 할 필요가 있었다.

이것을 하지 않으면 굉장히 돌아다닌다.

에서 @keyframes 는 transform: rotate 라는 것을 사용하고 있어.

이것을 사용하면 요소를 회전시킬 수 있습니다.

이번에는 0%→100%로 360도 회전한다 @keyframes 를 guruguru.manji 의 animation 프로퍼티에서 0.5秒 로 1회전하도록 지정했습니다.

이것으로 손 부분만을 돌려 전체는 왼쪽에서 오른쪽으로 이동하는 세(卍^o^)卍이 완성되었다! ! ! !

끝에

실제로 움직여 보니 멈추는 편이 뭔가 귀여운 생각이 들었다.

진짜 비전. (사용법 있는데··?)