AtomicCSS - How to make a fade-in animation?

Question

I am using the AtomicCSS framework from acss.io, so far so good.

However, I am stuck with creating animations. The reference page is silent about it and the examples page does not deliver any examples.

https://acss.io/reference.html

https://acss.io/guides/syntax.html#examples-

Let this be a starting point of my animation and show what I am looking for(fade in):

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

Answer 1

try this

 @keyframes fadeIn { from { opacity: 0; transform: translate3d(0, -20%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } 

 <div class="Animn(fadeIn)"></div>