diff --git a/web/app/app.animations.ts b/web/app/app.animations.ts
new file mode 100644
index 0000000..26ff967
--- /dev/null
+++ b/web/app/app.animations.ts
@@ -0,0 +1,13 @@
+import { animate, style, transition, trigger } from "@angular/animations";
+
+export const ANIMATION_FADE_IN_NOT_OUT =
+    trigger('fadeInNotOutAnimation', [
+        transition(':enter', [
+            style({opacity: 0}),
+            animate('200ms', style({opacity: 1})),
+        ]),
+        // transition(':leave', [
+        //     style({opacity: 1}),
+        //     animate('100ms', style({opacity: 0})),
+        // ]),
+    ]);
\ No newline at end of file
diff --git a/web/app/elements/ibox/ibox.component.html b/web/app/elements/ibox/ibox.component.html
index 93d6b83..1fe77fd 100644
--- a/web/app/elements/ibox/ibox.component.html
+++ b/web/app/elements/ibox/ibox.component.html
@@ -9,7 +9,7 @@
         <i class="ibox-icon fa" *ngIf="isCollapsible"
            [ngClass]="[collapsed ? 'fa-chevron-right' : 'fa-chevron-down']"></i>
     </div>
-    <div class="ibox-content" *ngIf="!collapsed">
+    <div class="ibox-content" *ngIf="!collapsed" [@fadeInNotOutAnimation]>
         <ng-content select=".my-ibox-content"></ng-content>
     </div>
 </div>
\ No newline at end of file
diff --git a/web/app/elements/ibox/ibox.component.ts b/web/app/elements/ibox/ibox.component.ts
index ce310bd..e37fb5c 100644
--- a/web/app/elements/ibox/ibox.component.ts
+++ b/web/app/elements/ibox/ibox.component.ts
@@ -1,9 +1,11 @@
 import { Component, Input, OnInit } from "@angular/core";
+import { ANIMATION_FADE_IN_NOT_OUT } from "../../app.animations";
 
 @Component({
     selector: "my-ibox",
     templateUrl: "./ibox.component.html",
     styleUrls: ["./ibox.component.scss"],
+    animations: [ANIMATION_FADE_IN_NOT_OUT],
 })
 export class IboxComponent implements OnInit {
     @Input() title: string;