Índice

Acionando animações e transições CSS

As animações CSS permitem que elementos da Web façam a transição de uma configuração de estilo CSS para outra. O navegador pode iniciar animações definidas durante a carga, mas animações CSS acionadas por eventos dependem da adição e remoção de classes. AMP suporta os dois tipos de animação.

Use CSS quando tiver uma animação menor e contida que não precise ser cronometrada com precisão.

Definindo CSS e keyframes

Você pode definir CSS no AMP das seguintes maneiras:

Dentro da tag <style amp-custom> no interior do bloco head do documento. Limite de 75,000 bytes.
Estilos inline. Cada instância de um estilo inline tem um limite de 1.000 bytes. Os estilos inline contam para o limite de 75.000 bytes do <style amp-custom>.
Dentro da tag <style amp-keyframes> no interior do bloco head do documento. Limite de 500.000 bytes. Restrito a propriedades de keyframe.

Leia mais em Estilo e layout sobre como usar CSS no AMP.

Para manter suas páginas magras e velozes, o AMP impôs um limite de 75.000 bytes ao CSS na tag <amp style-custom>. Embora você possa definir estilos de animação usando essa tag, o limite de 500.000 bytes na tag <amp style-keyframes> permite animações mais detalhadas que não tiram recursos preciosos dos estilos do site.

  <style amp-custom>
    div {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
      animation: mymove 5s infinite;
    }
  </style>
</head>
<body>

<div></div>
  <style amp-keyframes>
   @keyframes mymove {
      0%   {transform: translatey(0px);}
      25%  {transform: translatey(200px);}
      75%  {transform: translatey(50px);}
      100% {transform: translatey(100px);}
    }
  </style>
</body>

Adicionando, removendo e alternando classes

A ação AMP, toggleClass ativa a adição e remoção de classes em elementos definidos.

elementName.toggleClass(class="className")

Você pode alternar uma classe no mesmo elemento com o qual você quer que os usuários interajam, como, por exemplo, um menu de hambúrguer animado.

<div
  id="hamburger"
  tabindex="1"
  role="button"
  on="tap:hamburger.toggleClass(class='close')"
></div>

A ação toggleClass também pode ser aplicada a outros elementos e alternar entre duas classes adicionando o atributo force.

<button
  on="tap:magicBox.toggleClass(class='invisible', force=true),magicBox.toggleClass(class='visible', force=false)"
>
  Disappear
</button>
<button
  on="tap:magicBox.toggleClass(class='visible', force=true),magicBox.toggleClass(class='invisible', force=false)"
>
  Reappear
</button>

Se você precisar remover uma classe e impedir a reaplicação, adicione o atributo force com valor false. Se você precisar adicionar uma classe e impedir a remoção, adicione force com valor true.

Animações com CSS e estado

Você pode adicionar e remover qualquer quantidade de classes CSS com estados usando amp-bind.

<head>
  <script
    async
    custom-element="amp-bind"
    src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
  ></script>
  <style amp-custom>
    div {
      height: 100px;
      width: 100px;
      margin: 1em;
      background-color: green;
      margin-left: 100px;
      transition: 2s;
    }
    .visible {
      opacity: 1;
    }
    .invisible {
      opacity: 0;
    }
    .left {
      transform: translatex(-50px);
    }
    .right {
      transform: translatex(50px);
    }
    button {
      margin-top: 1rem;
      margin-left: 1rem;
    }
  </style>
</head>
<body>
  <amp-state id="magicBox">
    <script type="application/json">
      {
        "visibleBox": {
          "className": "visible"
        },
        "invisibleBox": {
          "className": "invisible"
        },
        "moveLeft": {
          "className": "left"
        },
        "moveRight": {
          "className": "right"
        }
      }
    </script>
  </amp-state>
  <div [class]="magicBox[animateBox].className"></div>
  <button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
  <button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
  <button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
  <button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>
</body>

Abrir este trecho no playground

Defina múltiplas animações de classe primeiro adicionando uma lista de classes CSS na tag <style amp-custom> no bloco head do documento:

.visible {
  opacity: 1;
}
.invisible {
  opacity: 0;
}
.left {
  transform: translatex(-50px);
}
.right {
  transform: translatex(50px);
}

Em seguida, emparelhe cada classe com um estado:

<amp-state id="magicBox">
  <script type="application/json">
    {
      "visibleBox": {
        "className": "visible"
      },
      "invisibleBox": {
        "className": "invisible"
      },
      "moveLeft": {
        "className": "left"
      },
      "moveRight": {
        "className": "right"
      }
    }
  </script>
</amp-state>

E associe o elemento às classes:

<div [class]="magicBox[animateBox].className"></div>

Os estados mudam em uma ação ou evento AMP associado. O exemplo a seguir altera o estado a partir da interação do usuário:

<button on="tap:AMP.setState({animateBox: 'invisibleBox'})">Disappear</button>
<button on="tap:AMP.setState({animateBox: 'visibleBox'})">Reappear</button>
<button on="tap:AMP.setState({animateBox: 'moveLeft'})">Move Left</button>
<button on="tap:AMP.setState({animateBox: 'moveRight'})">Move Right</button>

Usando amp-bind dessa maneira, defina a classe explicitamente para a classe definida. Você não precisa mandá-la remover as outras classes.