Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

[nan-ser0]

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x] 3.x

I'm submitting a ... (check one with "x") [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Error: Failed to execute 'animate' on 'Element': Partial keyframes are not supported. at WebAnimationsPlayer._triggerWebAnimation (http://localhost:8100/build/main.js:109466:35) at WebAnimationsPlayer.init (http://localhost:8100/build/main.js:109449:29) at InjectableAnimationEngine.DomAnimationEngine._queuePlayer (http://localhost:8100/build/main.js:108741:16) at InjectableAnimationEngine.DomAnimationEngine.animateTransition (http://localhost:8100/build/main.js:108656:14) at InjectableAnimationEngine.DomAnimationEngine.setProperty (http://localhost:8100/build/main.js:108527:18) at AnimationRenderer.setProperty (http://localhost:8100/build/main.js:138770:26) at setElementProperty (http://localhost:8100/build/main.js:9980:19) at checkAndUpdateElementValue (http://localhost:8100/build/main.js:9899:13) at checkAndUpdateElementInline (http://localhost:8100/build/main.js:9833:24) at checkAndUpdateNodeInline (http://localhost:8100/build/main.js:12632:23)

Ionic Framework: ^3.3.0 Ionic Native: ^2.5.1 Ionic App Scripts: 1.3.7 Angular Core: 4.1.2 Angular Compiler CLI: 4.1.2 Node: 6.11.0 OS Platform: Windows 10 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Expected behavior: Create a list with * ngFor and animate each element. I want each element to appear after the other with animation.

Related code:

      <ion-item *ngFor="let card of cards; let i = index">
        <ion-row class="card-background-page" [@fadeIn]="animState">
          <ion-col>
            <ion-card class = "servSelect" [attr.id]="'list' + i" (click)="toggle($event)">
              <img src={{card.imgUrl}}/>
              <div class="card-info">
                  info
              </div>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-item>

    animations: [
      //for facebook button
      trigger('fadeIn', [
        state('in', style({
          opacity: 1
        })),
        transition('void => *', [
          style({
              transform: 'translateY(50px)',
              opacity: 0
          }),
          animate('500ms ease')
        ])
      ])
    ]

Other information: Sorry for my English :P

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

Thanks!!

[jgw96]

Hello! Thanks for opening an issue with us! As this seems like more of a support question I will urge that you ask this question on our forum or on our slack channel. Thanks for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.