simple loading animation and fade in and out animations

src/app/+collection-page/collection-page.component.html

@@ -1,5 +1,5 @@
 <div class="collection-page">
-  <div *ngIf="collectionData.hasSucceeded | async">
+  <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
     <!-- Collection Name -->
     <ds-comcol-page-header
       [name]="(collectionData.payload | async)?.name">
@@ -34,7 +34,7 @@
   <ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error>
   <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>
   <br>
-  <div *ngIf="itemData.hasSucceeded | async">
+  <div *ngIf="itemData.hasSucceeded | async" @fadeIn>
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
     <ds-object-list
       [config]="paginationConfig"

src/app/+collection-page/collection-page.component.ts

@@ -1,5 +1,8 @@
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
   OnInit
 } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
@@ -18,10 +21,16 @@ import { hasValue, isNotEmpty, isUndefined } from '../shared/empty.util';
 import { PageInfo } from '../core/shared/page-info.model';
 import { Observable } from 'rxjs/Observable';
 
+import { fadeIn, fadeInOut } from '../shared/animations/fade';
+
 @Component({
   selector: 'ds-collection-page',
   styleUrls: ['./collection-page.component.scss'],
   templateUrl: './collection-page.component.html',
+  animations:[
+    fadeIn,
+    fadeInOut
+  ]
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
   collectionData: RemoteData<Collection>;