Angular 4 Animation with FormGroup with sections not working

I have created an Angular animation for my FormGroup, so that different Form sections appear sequentially with animations. Here is the code-

animations:[ 
 trigger('visibilityChanged', [
    state('shown' , style({ opacity: 1 })),
    state('hidden', style({ opacity: 0 })),
    transition('shown => hidden', animate('600ms')),
    transition('void => *', animate('1000ms')),
    ])
 ]

And here is the html-

<form [formGroup]="regForm">
    <div *ngIf="showcontrol[0]" @visibilityChanged>
        <span id="formheading" class="text-center">ENTER TEAM DETAILS</span>
        <div class="form-group">
            <label for="teamname">Team Name:</label>
            <label class="validations" @load *ngIf="!regForm.get('team_name').valid && regForm.get('team_name').touched">Please Enter a Valid Team Name!</label>
            <input type="text" class="form-control" formControlName="team_name" id="teamname" required placeholder="Enter Your Team Name">
        </div>
        .......
        ..
    </div>