# animate method

1. @SupportedBrowser(SupportedBrowser.CHROME, '36')

Animation animate (Iterable<Map<String, dynamic>> frames, [ dynamic timing ])
@SupportedBrowser(SupportedBrowser.CHROME, '36')

- Creates a new AnimationEffect object whose target element is the object
- on which the method is called, and calls the play() method of the
- AnimationTimeline object of the document timeline of the node document
- of the element, passing the newly created AnimationEffect as the argument
- to the method. Returns an Animation for the effect.
- Examples

-     var animation = elem.animate([{"opacity": 75}, {"opacity": 0}], 200);

-     var animation = elem.animate([

-       {"transform": "translate(100px, -100%)"},

-       {"transform" : "translate(400px, 500px)"}

-     ], 1500);

- The `frames` parameter is an Iterable, where the
- map entries specify CSS animation effects. The
- `timing` paramter can be a double, representing the number of milliseconds
- for the transition, or a Map with fields corresponding to those
- of the `Timing` object.

## Implementation

    @SupportedBrowser(SupportedBrowser.CHROME, '36')
    Animation animate(Iterable<Map<String, dynamic>> frames, [timing]) {
      if (frames is! Iterable || !(frames.every((x) => x is Map))) {
        throw new ArgumentError("The frames parameter should be a List of Maps "
            "with frame information");
      }
      var convertedFrames;
      if (frames is Iterable) {
        convertedFrames = frames.map(convertDartToNative_Dictionary).toList();
      } else {
        convertedFrames = frames;
      }
      var convertedTiming =
          timing is Map ? convertDartToNative_Dictionary(timing) : timing;
      return convertedTiming == null
          ? _animate(convertedFrames)
          : _animate(convertedFrames, convertedTiming);
    }