JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<div class="abc">
 これだと1から10かぞえるまでの間
 5秒まではアニメーションつかずにただ表示(非表示にはできない)
 残りの5秒の間で2,5(50%)までopacity: 0;
</div>

CSS

@keyframes fadeIn {
   from {
       opacity:0;
   }
   50% {
     opacity: 0;
   }
   to {
       opacity:1;
   }
}
.abc {
   animation-name: fadeIn;
   animation-duration: 10s;
   animation-delay: 5s;
}