<!-- 
The DIV below has the data-pompous-player-stage attribute, which makes it a pompous player "stage".

The data-design-width="1920" data-design-height="1080" attributes define the presentation display ratio. 1920x1080, also known as 1080p, is the most popular choice, as it fits well on most of the screens.

The web-fonts="..." attribute specifies which web fonts will be used in this example.

The data-skin="none" means that there will be no navigation buttons (we'll add them later).
-->
<div data-pompous-player-stage 
     data-skin="none"  data-auto-start="true"
     data-design-width="1920" data-design-height="1080"
     data-web-fonts='{"google": {"families":["Srisakdi:700"]}}' class="pompous-stage" tabindex="0">
  <!-- The player will apply both classes "show" and "bounceInRight" after delay of 0 seconds from the play start. -->
  <div class="text-stay" data-classes="show bounceInRight delay-0s">Stay ... (to be continued)     </div>
</div>

Do you see the <br>
flying blue text?
.pompous-stage 
{
  all: initial;
  position: absolute;
  width: 800px;
  height: 0px;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  margin: auto;
  overflow: hidden;
  z-index: 1;
  transform: translate(-50%, -50%) scale(1.0);
  transform-origin: center center;
  outline: none;
  -webkit-user-select: none;        
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  perspective: 1000px;
  background-color: black;
}

.show
{
  visibility: visible;
}

/* 
The "--pp-..." CSS styles are something that only the Pompous Player understands. 
The "--pp-transform-from" style is required for animations, it specifies the starting animation value.
So at the animation start, we show the text at 1000px to the right, then move it to it's initial (resting) position (0px). 
The easeOutBack transition function gives it a bouncing effect at the end.
*/
.bounceInRight
{
  transition-property: transform;
  --pp-transform-from: translateX(1000px);
  transform: translateX(0px);
  --pp-transition-timing-function: easeOutBack;
  transition-duration: 1.5s;
}

.text-stay
{
  position: absolute;
  visibility: hidden;
  top: 163px;
  left: 355px;
  width: auto;
  height: auto;
  padding: 0px 20px 0px 20px;
  font-family: 'Srisakdi';
  font-weight: 700;
  font-style: normal;
  font-size: 142px;
  text-align: left;
  color: #0ea8cc;
  white-space: pre;
  word-break: break-word;
  line-height: 1;
  border-style: none;
}

/**
No Javascript code needed :)

Note: we added the following JS source in the JS "settings":
https://www.pompousphotos.com/js/pompous-player/26/pp-all-in-one.min.js
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://www.pompousphotos.com/js/pompous-player/26/pp-all-in-one.min.js