이미지 보기

[CSS] animation 태그와 접두사 prefix

21.07.08 작성

22.02.07 수정

읽는 데 4분

animation의 적용

앞서 배운 애니메이션 태그를 활용해보자.

* html 문서

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>animation_실습</title>
    <link href="css/style.css" />

    <!-- animation.css 파일 연동 -->
    <!-- animation.css 파일은 style.css 파일 뒤에 연결한다. -->
    <link href="css/animation.css" />
  </head>
  <body>
    <!-- forest1 -->
    <div id="color2">
      <div class="horse"></div>
      <div class="color2Wrap">
        <!-- 버튼 3개를 담는 서랍장 -->
        <div class="btn-wrap">
          <button class="red"></button>
          <button class="yellow"></button>
          <button class="blue"></button>
        </div>

        <!-- 커멘트를 넣는 태그와 내용 -->
        <p class="color2Comment">
          아이가 원하는 색상을 직접 만들며 색감을 스스로 발달시킵니다. <br />
          색이 잘 섞이므로 누구나 쉽게 다양한 색을 만들 수 있습니다.
        </p>
      </div>
    </div>
  </body>
</html>

* css 문서(animation.css) #intro .introWrap .lion {
  animaiton: spinLion 1500ms linear infinite alternate;
}

@keyframes spinLion {
  from {
    transform: rotate(-10deg);
  } /* -10도 지점에서 시작 */
  to {
    transform: rotate(10deg);
  } /* 10도 지점까지 움직임 */
}

웹 사이트에 접속했을 때 특별한 조건이 없어도 애니메이션이 자동으로 작동
동작하는 데 걸리는 시간
애니메이션 재생 속도 변화
애니메이션 재생 횟수
애니메이션 진행 방향 (alternate = 반복)

CSS3 애니메이션 개발 도구, 'stylie'

CSS에서 작성하는 애니메이션 코드로 구현이 어려운 애니메이션 동작의 경우, CSS코드로 가져올 수 있으면서 애니메이션을 쉽고 빠르게 만들 수 있는 웹 사이트가 있다. 바로 Stylie이다. 다음 링크를 참고하자.

strylie(https://jeremyckahn.github.io/stylie/)

단, 불필요한 CSS 속성까지 추가되어 코드 분량이 꽤나 길고, 이로 인해 모바일 기기에서는 애니메이션 효과가 떨어지는 단점이 생길 수 있으니, 특정한 상황에서만 사용하는 것이 좋다.

prefix의 적용

실제 웹사이트에서 animation 태그를 이용하는 경우, 여러 브라우저에서 동시에 작동해야하기 때문에 같은 애니메이션 태그를 접두사를 달리 해서 css 문서에 넣어야 한다. 이를 알아보자.

* css 문서(animation.css) #intro .introWrap .lion {
  /* -webkit : 크롬, 사파리 브라우저 고려 */
  -webkit-animaiton: spinLion 1500ms linear infinite alternate;

  /* -moz : 파이어폭스 브라우저 고려 */
  -moz-animaiton: spinLion 1500ms linear infinite alternate;

  animaiton: spinLion 1500ms linear infinite alternate;
}

/* -webkit : 크롬, 사파리 브라우저 고려 */
@-webkit-keyframes spinLion {
  from {
    -webkit-transform: rotate(-10deg);
  }
  to {
    -webkit-transform: rotate(10deg);
  }
}

/* -moz : 파이어폭스 브라우저 고려 */
@-moz-keyframes spinLion {
  from {
    -moz-transform: rotate(-10deg);
  }
  to {
    -moz-transform: rotate(10deg);
  }
}

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[CSS] animation 태그와 접두사 prefix

TOC

animation의 적용

CSS3 애니메이션 개발 도구, 'stylie'

prefix의 적용