amp-animation

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

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

{
  // Optional selector, vars, timing
  ...
  "switch": [
    {
      "media": "(min-width: 320px)",
      "keyframes": {...},
    },
    {
      "supports": "offset-distance: 0",
      "keyframes": {...},
    },
    {
      // Optional default: no conditionals
    }
  ]
}

{
  "selector": "#target1",
  "duration": "1s",
  "switch": [
    {
      "supports": "offset-distance: 0",
      "keyframes": {
        "offsetDistance": [0, '300px']
      }
    },
    {
      "keyframes": {
        "transform": [0, '300px']
      }
    }
  ]
}

<amp-animation layout="nodisplay">
<script type="application/json">
{
  "--delay": "0.5s",
  "--x": "100px",
  "animations": [
    {
      "selector": "#target1",
      "delay": "var(--delay)",
      "--x": "150px",
      "keyframes": {"transform": "translate(var(--x), var(--y, 0px)"}
    },
    ...
  ]
}
</script>
</amp-animation>

{
  ...
  "duration": "1s",
  "delay": 100,
  "endDelay": "var(--end-delay, 10ms)",
  "easing": "ease-in",
  "fill": "both"
  ...
}

{
  "selector": ".target",
  "delay": 100,
  "--y": "100px",
  "subtargets": [
    {
      "index": 0,
      "delay": 200,
    },
    {
      "selector": ":nth-child(2n+1)",
      "--y": "200px"
    }
  ]
}

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

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

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

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

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

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

<style amp-custom>
  @keyframes keyframes1 {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>

<amp-animation layout="nodisplay">
<script type="application/json">
{
  "duration": "1s",
  "keyframes": "keyframes1"
}
</script>
</amp-animation>

<amp-animation layout="nodisplay">
<script type="application/json">
{
  "selector": "#target-id",
  "duration": "1s",
  "keyframes": {"opacity": 1}
}
</script>
</amp-animation>

### Animasyon düzeni <a name="animation-composition"></a>

Animasyonlar, diğer animasyonlara başvuruda bulunabilir ve böylece, çeşitli `amp-animation` bildirimleri tek bir nihai animasyonda birleştirebilir. Animasyona başka bir animasyondan başvurmak iç içe yerleştirmeyle büyük ölçüde aynıdır. Bir kişinin animasyonları farklı öğelere bölmek istemesinin nedeni, aynı animasyonu çeşitli yerlerden yeniden kullanmak veya her animasyon bildirimini daha küçük ve daha yönetilebilir yapmaktır.

Örneğin:
```html
<amp-animation id="anim1" layout="nodisplay">
<script type="application/json">
{
  "animation": "anim2",
  "duration": 1000,
  "--scale": 2
}
</script>
</amp-animation>

<amp-animation id="anim2" layout="nodisplay">
<script type="application/json">
{
  "selector": ".target-class",
  "keyframes": {"transform": "scale(var(--scale))"}
}
</script>
</amp-animation>

<amp-animation id="anim1" layout="nodisplay">
<script type="application/json">
{
  "selector": ".target-class",
  "animation": "anim2",
  "duration": 1000,
  "--scale": 2
}
</script>
</amp-animation>

<amp-animation id="anim2" layout="nodisplay">
<script type="application/json">
{
  "keyframes": {"transform": "scale(var(--scale))"}
}
</script>
</amp-animation>

<amp-animation layout="nodisplay">
<script type="application/json">
[
  {
    "selector": ".target-class",
    "duration": "4s",
    "delay": "var(--delay)",
    "--y": "var(--other-y, 100px)",
    "keyframes": {"transform": "translate(calc(100vh + 20px), var(--y))"}
  }
]
</script>
</amp-animation>

Animasyon bileşenleri kendi değişkenlerini `--var-name` alanları olarak belirtebilir. Bu değişkenler, iç içe yerleştirilmiş animasyonlara yayılır ve stil sayfası (`<style>` etiketi) aracılığıyla belirtilen hedef öğelerin değişkenlerini geçersiz kılar. `var()` ifadeleri, önce animasyonlarda belirtilenleri ve ardından, hedef stilleri sorgulayarak değişken değerlerini çözümlemeye çalışır.

### CSS uzantıları <a name="css-extensions"></a>

`amp-animation`, tipik animasyon gereksinimleri için çeşitli CSS uzantıları sağlar: `rand()`, `num()`, `width()` ve `height()`. Bu işlevler, zamanlama ve animasyon karesi değerleri dahil olmak üzere CSS değerlerinin `amp-animation` içinde kullanılabildiği her yerde kullanılabilir.

#### CSS `index()` uzantısı <a name="css-index-extension"></a>

`index()` işlevi, animasyon efektindeki geçerli hedef öğesinin bir dizinini döndürür. Bu en çok birden fazla hedefin `selector` özelliği kullanılarak aynı efektle canlandırıldığı durumlarla alakalıdır. Seçici tarafından eşleştirilen ilk hedef dizin `0` , ikincisi dizin `1` değerine sahip olur ve diğer hedeflerin değerleri bu düzende devam eder.

Diğer özelliklerin yanı sıra, bu özellik `calc()` ifadeleriyle birleştirilebilir ve kademeli efekt oluşturmak için kullanılabilir. Örneğin:

#### CSS `length()` uzantısı <a name="css-length-extension"></a>

`length()` işlevi, animasyon efektindeki hedef öğe sayısını döndürür. Bu uzantı, en çok `index()` ile birleştirildiği durumlarla alakalıdır:

#### CSS `rand()` uzantısı <a name="css-rand-extension"></a>

`rand()` işlevi rastgele bir CSS değeri döndürür. İki biçimi vardır.

Bağımsız değişken kullanılmayan biçim 0 ile 1 arasındaki rastgele bir sayı döndürür.

İkinci biçim iki bağımsız değişken içerir ve bu iki bağımsız değişken arasındaki rastgele değeri döndürür.

#### CSS `width()` ve `height()` uzantıları <a name="css-width-and-height-extensions"></a>

`width()` ve `height()` uzantıları, animasyonlu öğenin veya seçici tarafından belirtilen öğenin genişliğini/yüksekliğini döndürür. Döndürülen değer piksel cinsindendir (ör. `100px`).

Şu biçimler desteklenir:
- `width()` ve `height()` - canlandırılan öğenin genişliği/yüksekliği.
- `width('.selector')` ve `height('.selector')` - seçici tarafından belirtilen öğenin genişliği/yüksekliği. Herhangi bir CSS seçici kullanılabilir. Örneğin, `width('#container &gt; li')`.
- `width(closest('.selector'))` ve `height(closest('.selector'))` - en yakın seçici tarafından belirtilen öğenin genişliği/yüksekliği.

`width()` ve `height()`, özellikle dönüşümler için yararlıdır. Animasyonları kapsayıcı boyutuyla orantılı olarak ifade etmek için `%` değerleri kullanabilen `left`, `top` ve benzer CSS özellikleri. Bununla birlikte, `transform` özelliği, `%` değerlerini farklı bir şekilde, seçilen öğenin bir yüzdesi olarak yorumlar. Bu nedenle, dönüşüm animasyonlarını kapsayıcı öğeler ve benzerleri açısından ifade etmek için `width()` ve `height()` kullanılabilir.

Bu işlevler `calc()`, `var()` ve diğer CSS ifadeleriyle birleştirilebilir. Örneğin:

#### CSS `num()` uzantısı <a name="css-num-extension"></a>

`num()` işlevi, bir CSS değeri için sayı gösterimini döndürür. Örneğin:

- `num(11px)`, `11` sonucunu verir;
- `num(110ms)`, `110` sonucunu verir;
- vb.

Örneğin, aşağıdaki ifade gecikmeyi, öğenin genişliği ile orantılı olarak saniye cinsinden hesaplar:

### SVG animasyonları <a name="svg-animations"></a>

SVG'ler harikadır ve bunların animasyonlar için kullanılmasını kesinlikle öneririz!

SVG animasyonları, bazı küçük farklarla [Animasyon kareleri için beyaz listedeki özellikler](#allow-listed-properties-for-keyframes) bölümünde açıklanan CSS özellikleri aracılığıyla desteklenir:

* IE/Edge SVG öğeleri [CSS `transform` özelliklerini desteklemez](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/1173754/). `Transform` animasyonunun kendisi çok dolguludur. Bununla birlikte, bir stil sayfasında tanımlanan başlangıç durumu uygulanmaz. İlk dönüştürülmüş durum IE/Edge için önemliyse [SVG `transform` özelliği](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) aracılığıyla yinelenmesi önerilir.
* `transform` CSS'sine IE/Edge için çoklu dolgu yapılırken, ne yazık ki `transform-origin` için çoklu dolgu yapmak mümkün değildir. Dolayısıyla, IE/Edge ile uyumluluk istendiğinde, yalnızca varsayılan `transform-origin` öğesinin kullanılması önerilir.
* Tarayıcıların çoğu, şu anda `transform-origin` CSS'sini doğru şekilde yorumlama konusunda sorun yaşamaktadır. [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=740300), [Safari](https://bugs.webkit.org/show_bug.cgi?id=174285) ve [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=1379340) ile ilgili sorunlara bakın. Bu karışıklığın büyük bir kısmı, [CSS `transform-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box) uygulandığında çözülür. `transform-origin` öğesinin önemli olduğu durumlarda, gelecekte uyumlu olması için istenen `transform-box` CSS'sinin de eklenmesi önerilir.

## Animasyonu tetikleme <a name="triggering-animation"></a>

Animasyon, bir `trigger` özelliği veya bir `on` işlemi aracılığıyla tetiklenebilir.

### `trigger` özelliği <a name="trigger-attribute"></a>

Şu anda, `trigger` özelliği için kullanılabilen tek değer `visibility` değeridir. `visibility`, temel doküman veya yerleştirme (görüntü alanında) görünür olduğunda tetiklenir.

Örneğin:
```html
<amp-animation id="anim1" layout="nodisplay"
    trigger="visibility">
    ...
  </amp-animation>

<amp-animation id="anim1" layout="nodisplay">
  ...
</amp-animation>
<button on="tap:anim1.start">Animate</button>