diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 4772cd1c7357b50b55e4a4c44e1a2846d15c2677..bec219d756e99fab91815c52b98b95218f60ef50 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -99,7 +99,7 @@
 
 <div *ngIf="!isLoading">
   <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current"
-               [parseVote]="getVote(current)"></app-comment>
+               [parseVote]="getVote(current)" [@sortList]></app-comment>
 </div>
 
 <div *ngIf="comments && comments.length < 1 && !isLoading" fxLayout="row" fxLayoutAlign="center center"
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 39db2a14e9e3211844ed6d6d0cbbeccb4d9fbb9a..724eb13a9f12e58318bbf92879d063d976e73881 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -14,11 +14,28 @@ import { Room } from '../../../models/room';
 import { RoomService } from '../../../services/http/room.service';
 import { VoteService } from '../../../services/http/vote.service';
 import { NotificationService } from '../../../services/util/notification.service';
+import { animate, keyframes, query, stagger, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'app-comment-list',
   templateUrl: './comment-list.component.html',
-  styleUrls: ['./comment-list.component.scss']
+  styleUrls: ['./comment-list.component.scss'],
+  animations: [
+
+    trigger('sortList', [
+      transition('* => *', [
+
+        query(':enter', style({ opacity: 0 }), { optional: true }),
+
+        query(':enter', stagger('0.3s', [
+          animate('1s ease-in', keyframes([
+            style({ opacity: 0, transform: 'translateY(-20%)', offset: 0 }),
+            style({ opacity: .5, transform: 'translateY(10%)',  offset: 0.4 }),
+            style({ opacity: 1, transform: 'translateY(0)',     offset: 1.0 }),
+          ]))]), { optional: true })
+      ])
+    ])
+  ]
 })
 export class CommentListComponent implements OnInit {
   @ViewChild('searchBox') searchField: ElementRef;
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 099509c1c5331ec18e5cbbbb802ec39b97f3e2c4..e0fa004e71123929f10c8f1866d54108a20ccc2a 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,5 +1,5 @@
 <mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
-                                        '': !comment.highlighted}" [@slide]>
+                                        '': !comment.highlighted}">
   <div fxLayout="column">
     <div fxLayout="row">
       <div class="date-container">