angular tab change smooth transition

1.mat-tab-body {
2    animation: fade-out 0.5s;
3    opacity: 0;
4}
5.mat-tab-body.mat-tab-body-active {
6    animation: fade-in 0.5s;
7    opacity: 1;
8}
9
10@keyframes fade-in {
11    0% {
12        opacity: 0;
13    }
14    50% {
15        opacity: 0;
16    }
17    100% {
18        opacity: 1;
19    }
20}
21
22@keyframes fade-out {
23    0% {
24        opacity: 1;
25    }
26    50% {
27        opacity: 0;
28    }
29    100% {
30        opacity: 0;
31    }
32}
33