diff --git a/types/web-animations-js/index.d.ts b/types/web-animations-js/index.d.ts
index 2424e93e92..54c0b8c01b 100644
--- a/types/web-animations-js/index.d.ts
+++ b/types/web-animations-js/index.d.ts
@@ -5,13 +5,12 @@
 
 type AnimationEffectTimingFillMode = "none" | "forwards" | "backwards" | "both" | "auto";
 type AnimationEffectTimingPlaybackDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
-type AnimationPlayState = "idle" | "pending" | "running" | "paused" | "finished";
+type AnimationPlayState = "idle" | "running" | "paused" | "finished";
 
-declare class AnimationPlaybackEvent {
-    constructor(target: Animation, currentTime: number, timelineTime: number);
+interface AnimationPlaybackEvent {
     target: Animation;
-    currentTime: number;
-    timelineTime: number;
+    readonly currentTime: number | null;
+    readonly timelineTime: number |  null;
     type: string;
     bubbles: boolean;
     cancelable: boolean;
@@ -21,14 +20,26 @@ declare class AnimationPlaybackEvent {
     timeStamp: number;
 }
 
+interface AnimationPlaybackEventInit extends EventInit {
+    currentTime?: number | null;
+    timelineTime?: number | null;
+}
+
+declare var AnimationPlaybackEvent: {
+    prototype: AnimationPlaybackEvent;
+    new(type: string, eventInitDict?: AnimationPlaybackEventInit): AnimationPlaybackEvent;
+};
+
 interface AnimationKeyFrame {
-    easing?: string;
-    offset?: number;
-    [key: string]: string | number | [string | number, string | number] | undefined;
+    easing?: string | string[];
+    offset?: number | Array<number | null> | null;
+    opacity?: number | number[];
+    transform?: string |  string[];
+    // [key: string]: string | number | [string | number, string | number] | undefined; (duplicate string indexer in TypeScript 2.7+)
 }
 
 interface AnimationTimeline {
-    currentTime: number;
+    readonly currentTime: number | null;
     getAnimations(): Animation[];
     play(effect: KeyframeEffect): Animation;
 }
@@ -43,21 +54,35 @@ interface AnimationEffectTiming {
     iterations?: number;
     playbackRate?: number;
 }
-declare class KeyframeEffect {
+
+interface AnimationEffectReadOnly {
+    readonly timing: number;
+    getComputedTiming(): ComputedTimingProperties;
+}
+
+interface ComputedTimingProperties {
+    endTime: number;
+    activeDuration: number;
+    localTime: number | null;
+    progress: number | null;
+    currentIteration: number | null;
+}
+
+declare class KeyframeEffect implements AnimationEffectReadOnly {
     constructor(target: HTMLElement, effect: AnimationKeyFrame | AnimationKeyFrame[], timing: number | AnimationEffectTiming, id?: string);
     activeDuration: number;
     onsample: (timeFraction: number | null, effect: KeyframeEffect, animation: Animation) => void | undefined;
     parent: KeyframeEffect | null;
     target: HTMLElement;
-    timing: AnimationEffectTiming;
+    timing: number;
+    getComputedTiming(): ComputedTimingProperties;
     getFrames(): AnimationKeyFrame[];
     remove(): void;
 }
-type AnimationEventListener = (evt: AnimationPlaybackEvent) => void;
+type AnimationEventListener = (this: Animation, evt: AnimationPlaybackEvent) => any;
 
-declare class Animation {
-    constructor(effect: KeyframeEffect, timeline?: AnimationTimeline);
-    currentTime: number;
+interface Animation extends EventTarget {
+    currentTime: number | null;
     id: string;
     oncancel: AnimationEventListener;
     onfinish: AnimationEventListener;
@@ -69,14 +94,19 @@ declare class Animation {
     pause(): void;
     play(): void;
     reverse(): void;
-    addEventListener(type: "finish" | "cancel", handler: AnimationEventListener): void;
-    removeEventListener(type: "finish" | "cancel", handler: AnimationEventListener): void;
-    effect: KeyframeEffect;
+    addEventListener(type: "finish" | "cancel", handler: EventListener): void;
+    removeEventListener(type: "finish" | "cancel", handler: EventListener): void;
+    effect: AnimationEffectReadOnly;
     readonly finished: Promise<Animation>;
     readonly ready: Promise<Animation>;
     timeline: AnimationTimeline;
 }
 
+declare var Animation: {
+    prototype: Animation;
+    new(effect?: AnimationEffectReadOnly, timeline?: AnimationTimeline): Animation;
+};
+
 declare class SequenceEffect extends KeyframeEffect {
     constructor(effects: KeyframeEffect[]);
 }