display: none; の DOM で CSS アニメーションを使用する方法

animation プロパティを使用するといい。

@keyframes FADE_IN {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.sample {
    display: none;
}

.sample.is-show{
    display: block;
    animation: FADE_IN 1s ease 0s;
}