---
title: AnimationTimeline
slug: Web/API/AnimationTimeline
tags:
  - API
  - Animation
  - AnimationTimeline
  - Experimental
  - Interface
  - Reference
  - Web Animations
  - waapi
  - web animations api
translation_of: Web/API/AnimationTimeline
---
<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>

<p>The <code>AnimationTimeline</code> interface of the <a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> represents the timeline of an animation. This interface exists to define timeline features (inherited by {{domxref("DocumentTimeline")}} and future timeline types) and is not itself directly used by developers. Anywhere you see <code>AnimationTimeline</code>, you should use <code>DocumentTimeline</code> or any other timeline type instead.</p>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("AnimationTimeline.currentTime")}} {{readonlyInline}}</dt>
 <dd>Returns the time value in milliseconds for this timeline or <code>null</code> if this timeline is inactive.</dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Animations', '#the-animationtimeline-interface', 'AnimationTimeline' )}}</td>
   <td>{{Spec2('Web Animations')}}</td>
   <td>Editor's draft.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.AnimationTimeline")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
 <li>{{domxref("DocumentTimeline")}}</li>
 <li>{{domxref("Document.timeline")}}</li>
</ul>