Home
AMP
Component

구글 AMP – 애니메이션

11 min read

Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다.

Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다.

<script async custom-element="amp-animation" 
src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

애니메이션의 세부 사항은 json 구조 내에 정의됩니다.

Amp-animation의 기본 구조는 다음과 같습니다.

<amp-animation layout="nodisplay">
<script type="application/json">
{
  // Timing properties
  ...
  "animations": [
    {
      // animation 1
    },
    ...
    {
      // animation n
    }
  ]
}
</script>
</amp-animation>

애니메이션 구성 요소는 선택자(Selectors), 변수(Variables), 타이밍 속성(Timing Properties), 키프레임(Keyframes) 등으로 구성됩니다. 

{
  "selector": "#target-id",
  // Variables
  // Timing properties
  // Subtargets
  ...
  "keyframes": []
}

Selector

여기에서 애니메이션이 사용될 요소의 클래스 또는 ID를 제공해야 합니다.

Variables

키프레임 내에서 사용되도록 정의된 값입니다. 변수는 var()를 사용하여 정의됩니다

예제

{
  "--delay": "0.5s",
  "animations": [
    {
 
      "selector": "#target1",
      "delay": "var(--delay)",
      "--x": "150px",
      "--y" : "200px",
      "keyframes": {"transform": "translate(var(--x), var(--y, 0px)"}
    }
  ]
}

여기서 delay, x 및 y는 변수이고 변수 값은 표시된 예제에서 정의됩니다.

Timing 속성

여기에서 애니메이션의 지속 시간과 지연을 정의할 수 있습니다. 다음은 지원되는 타이밍 속성입니다.

속성 값 설명
duration ms 초 단위 애니메이션에 사용되는 시간입니다.
delay ms 초 단위 애니메이션이 실행되기 전에 지연됩니다.
endDelay ms 초 단위 애니메이션이 완료될 때 적용되는 지연입니다.
iterations 숫자 애니메이션이 반복되어야하는 횟수입니다.
iterationStart 숫자 효과가 애니메이션을 시작하는 시간 오프셋입니다.
easing 문자열 애니메이션에 여유 효과를 가져오는데 사용됩니다.
easing의 예는 linear, ease, ease-in, ease-out , ease-in-out 등입니다.
direction 문자열 "normal", "reverse", "alternate" 또는 "alternate-reverse" 중 하나입니다.
fill 문자열 "none", "forwards", "backwards", "both", "auto"가 값이 될 수 있습니다.

Keyframes

키프레임은 객체 형태 또는 배열 형태와 같은 다양한 방식으로 정의할 수 있습니다. 다음 예를 고려하십시오.

예제

"keyframes": {"transform": "translate(100px,200px)"}

예제

{
  "keyframes": {
    "opacity": [1, 0],
    "transform": ["scale(1)", "scale(2)"]
  }
}

예제

{
  "keyframes": [
    {"opacity": 1, "transform": "scale(1)"},
    {"opacity": 0, "transform": "scale(2)"}
  ]
}

예제

{
  "keyframes": [
    {"easing": "ease-out", "opacity": 1, "transform": "scale(1)"},
    {"opacity": 0, "transform": "scale(2)"}
  ]
}

CSS를 사용한 키프레임

<style amp-custom>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    margin: 0 auto;
    transform:scale(3);
  }
  @keyframes example { 0% {transform:scale(3)}
    75% {transform:scale(2)}
    100% {transform:scale(1)}
  }
</style>
<amp-animation layout="nodisplay">
<script type="application/json">
  {
    "duration": "4s",
    "keyframes": "example"
}
</script>
</amp-animation>

키프레임 내에서 사용할 수 있는 몇 가지 CSS 속성이 있습니다. 지원되는 속성을 화이트리스트 속성이라고합니다. 다음은 키프레임 내에서 사용할 수 있는 화이트리스트 속성입니다.

  • opacity
  • transform
  • visibility
  • 'offsetDistance'

참고:
위에 나열된 속성 외에 다른 속성을 사용하면 콘솔에서 오류가 발생합니다.

이제 애니메이션이 적용될 때 이미지를 회전시키는 간단한 예제를 통해 이해하겠습니다. 이 예에서는 amp-animation을 사용하여 이미지를 회전합니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    amp-img {
      border: 1px solid black;
      border-radius: 4px;
      padding: 5px;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay" trigger="visibility">
<script type="application/json">
  {
    "duration": "1s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes": {
          "transform": "rotate(20deg)"
        }
      }
    ]
  }
</script>
</amp-animation>
<br/>
<br/>
<amp-img id="image1"
         src="images/christmas1.jpg"
         width="300"
         height="250"
         layout="responsive">
</amp-img>
<br/>
</body>
</html>

결과

위에서 사용된 amp-animation 세부 정보는 아래 코드에 나와 있습니다.

<script type="application/json">
  {
    "duration": "1s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes": {
          "transform": "rotate(20deg)"
        }
      }
    ]
  }
</script>
</amp-animation>

여기서 Seletor는 회전 애니메이션이 적용되는 이미지의 ID입니다.

<amp-img id="image1"
         src="images/christmas1.jpg"
         width="300"
         height="250"
         layout="responsive">
</amp-img>

CSS에서 키프레임을 사용하는 예

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(3);
    }

    @keyframes example {
      0% {transform:scale(3)}
      75% {transform:scale(2)}
      100% {transform:scale(1)}
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay" trigger="visibility">
<script type="application/json">
  {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes":"example"
      }
    ]
  }
</script>
</amp-animation>
<br/>
<br/>
<div id="image1"></div>
<br/>
</body>
</html>

결과

Animation Trigger

trigger="visibility"를 사용하면 애니메이션이 기본적으로 적용됩니다. 이벤트에서 애니메이션을 시작하려면 아래 예와 같이 trigger="visibility"를 제거하고 이벤트를 추가하여 애니메이션을 시작해야 합니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(3);
    }

    @keyframes example {
      0% {transform:scale(3)}
      75% {transform:scale(2)}
      100% {transform:scale(1)}
    }
    
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay">
<script type="application/json">
  {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes":"example"
      }
    ]
  }
</script>
</amp-animation>
<button on="tap:anim1.start">Start</button>
<br/>
<br/>
<div id="image1"></div>
</body>
</html>

시작 버튼을 누르면 애니메이션이 시작됩니다.

결과

애니메이션을 시작하기 위해 start와 on이라는 액션을 사용했습니다. 마찬가지로 다음과 같은 다른 action이 지원됩니다.

  • start
  • pause
  • restart
  • resume
  • togglePause
  • seekTo
  • reverse
  • finish
  • cancel

액션을 사용할 수 있는 실제 예제를 보겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    #image1 {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(2);
    }

    @keyframes example {
      0% {transform:scale(2)}
      75% {transform:scale(1)}
      100% {transform:scale(0.5)}
    }

    button1 {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay">
<script type="application/json">
  {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes":"example"
      }
    ]
  }
</script>
</amp-animation>
<button on="tap:anim1.start">Start</button>
<button on="tap:anim1.pause">Pause</button>
<button on="tap:anim1.resume">Resume</button>
<button on="tap:anim1.reverse">Reverse</button>
<button on="tap:anim1.cancel">cancel</button>
<button on="tap:anim1.finish">finish</button>
<button on="tap:anim1.togglePause">togglePause</button>
<button on="tap:anim1.seekTo(percent=1.00)">seekTo(100%)</button>
<br/>
<br/>
<br/>
<br/>
<div id="image1"></div>

</body>
</html>

결과
방문해주셔서 감사합니다. 즐거운 하루 되세요!

관심 있을 만한 글

  • 구글 AMP – User Notification
    구글 amp-user-notification은 사용자에게 닫을 수 있는 대화 상자 메시지를 표시하는데 사용됩니다. 우리는 페이지의 쿠키에 대해 사용자에게 알리는데 사용할 수 있습니다. amp-user-notification을 사용하려면 페이지에 다음 스크립트를 추가해야 합니다. <sc…
  • 구글 AMP – Selector
    Amp-selector는 옵션 메뉴를 표시하는 amp 구성 요소이며 사용자가 옵션 중에서 선택할 수 있습니다. 표시되는 옵션은 텍스트, 이미지 또는 기타 amp 구성 요소 일 수 있습니다. 이 글에서는 이에 대해 자세히 설명하겠습니다. amp-selector를 사용하려면 다음 자바스크립트 파일을 포함해야 …
  • 구글 AMP – List
    Amp-list는 CORS json 엔드 포인트를 호출하고 템플릿 내부의 json 파일 형식으로 데이터를 표시하는 amp 구성 요소입니다. 예제의 도움으로 이것을 이해합시다. amp-list를 사용하려면 다음 스크립트를 포함해야 합니다. <script async custom-element="am…
  • 구글 AMP – 동적 CSS 클래스
    amp-dynamic-css-classes는 body 태그에 동적 클래스를 추가합니다. 이 글에서는 이 태그에 대해 자세히 알아보겠습니다. amp-dynamic-css-classes로 작업하려면 다음 스크립트를 추가해야 합니다. <script async custom-element="amp-dyn…
  • 구글 AMP – Link
    Amp의 Link 태그는 사용 가능한 amp 및 non-amp 페이지에 대해 Google 검색 엔진에 알리는 데 사용됩니다. 이 글에서는 Link 태그와 관련된 측면과 구글이 amp-page 및 non amp-page에 대해 결정하는 방법에 대해 자세히 설명하겠습니다. AMP 페이지 발견 https…
  • 구글 AMP – Font
    Amp 글꼴은 기본적으로 amp 페이지에 대한 사용자 지정 글꼴을 트리거하고 모니터링하는 데 도움이 되는 amp의 amp 구성 요소입니다. 이 글에서는 amp-font에 대해 자세히 설명합니다. Amp-font를 사용하려면 다음 자바스크립트 파일을 추가해야 합니다. <script async …

댓글 쓰기