JSFiddle - React, Tailwind, and code Playground

by madvofirst

HTML

<iframe class="iframe" src="https://advofirst.de/chat.html">

</iframe>

CSS

.iframe {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 300px;
  height: 400px;
  animation: animationFrames ease-in 0.5s;
  animation-iteration-count: 1;
  transform-origin: 0% 0%;
  animation-fill-mode: forwards;
  /*when the spec is finished*/
  -webkit-animation: animationFrames ease-in 0.5s;
  -webkit-transform-origin: 100% 100%;
  -webkit-animation-fill-mode: forwards;
}

@keyframes animationFrames {
  0% {
      opacity: 0;
  }
  50% {
      opacity: 0;
  }
  100% {
      opacity: 1.0;
  }
}