Introduction of a website with CSS animation

I have the code for a website written using HTML, CSS, and JavaScript. Let's consider the following code, which is taken from this.

<!-- saved from url=(0079)https://web.ics.purdue.edu/~gchopra/class/public/pages/webdesign/05_simple.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>A very simple webpage</title>
<basefont size="4">
<style type="text/css">
.stackedit-open-button {
  position: absolute;
  width: 24px;
  height: 24px;
  background: no-repeat url("chrome-extension://ajehldoplanpchfokmeempkekhnhmoha/icon.svg");
  background-size: 24px 24px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.5s;
}

.stackedit-open-button:focus,
.stackedit-open-button:hover {
  opacity: 1;
}
</style></head>

<body bgcolor="FFFFFF" data-new-gr-c-s-check-loaded="14.1067.0" data-gr-ext-installed="">

<h1>A very simple webpage. This is an "h1" level header.</h1>

<h2>This is a level h2 header.</h2>

<h6>This is a level h6 header.  Pretty small!</h6>

<p>This is a standard paragraph.</p>

<p align="center">Now I've aligned it in the center of the screen.</p>

<p align="right">Now aligned to the right</p>

<p><b>Bold text</b></p>

<p><strong>Strongly emphasized text</strong>  Can you tell the difference vs. bold?</p>

<p><i>Italics</i></p>

<p><em>Emphasized text</em>  Just like Italics!</p>

<p>Here is a pretty picture: <img src="./A very simple webpage_files/prettypicture.jpg" alt="Pretty Picture"></p>

<p>Same thing, aligned differently to the paragraph: <img align="top" src="./A very simple webpage_files/prettypicture.jpg" alt="Pretty Picture"></p>

<hr>

<h2>How about a nice ordered list!</h2>
<ol>
  <li>This little piggy went to market
  </li><li>This little piggy went to SB228 class
  </li><li>This little piggy went to an expensive restaurant in Downtown Palo Alto
  </li><li>This little piggy ate too much at Indian Buffet.
  </li><li>This little piggy got lost
</li></ol>

<h2>Unordered list</h2>
<ul>
  <li>First element
  </li><li>Second element
  </li><li>Third element
</li></ul>

<hr>

<h2>Nested Lists!</h2>
<ul>
  <li>Things to to today:
    <ol>
      <li>Walk the dog
      </li><li>Feed the cat
      </li><li>Mow the lawn
    </li></ol>
  </li><li>Things to do tomorrow:
    <ol>
      <li>Lunch with mom
      </li><li>Feed the hamster
      </li><li>Clean kitchen
    </li></ol>
</li></ul>

<p>And finally, how about some <a href="http://www.yahoo.com/">Links?</a></p>

<p>Or let's just link to <a href="https://web.ics.purdue.edu/~gchopra/class/public/index.html">another page on this server</a></p>

<p>Remember, you can view the HTMl code from this or any other page by using the "View Page Source" command of your browser.</p>




</body><grammarly-desktop-integration data-grammarly-shadow-root="true"></grammarly-desktop-integration></html>

Also, I have a code for some CSS animation. Let's consider the following code, which is taken from this.

<!DOCTYPE html>
<html>
<div class="text middle" data-text="Glitch Effect">
  Glitch Effect
</div>
</html>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: "montseratt", sans-serif;
  background-color: #000;
}

.middle {
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
}

.text {
  color: #fff;
  text-transform: uppercase;
  font-size: 60px;
  letter-spacing: 14px;
}

.text::before, .text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.text::before {
  color: #ff00c1;
  animation: glitch-effect 3s infinite;
}

.text::after {
  color: #3498db;
  animation: glitch-effect 2s infinite;
}

@keyframes glitch-effect {
  0% {
    left: -2px;
    top: -2px;
  }
  25% {
    left: 2px;
    top: 0px;
  }
  50% {
    left: -1px;
    top: 2px;
  }
  75% {
    left: 1px;
    top: -1px;
  }
  100% {
    left: 0px;
    top: -2px;
  }
}

<style>

What I am trying to do:

Once I click on the link of the website the CSS animation (second code) will be played for a few seconds, let's say 30 seconds.
While playing the animation (i.e., the first 30 seconds) content of the website (i.e., the content of the first code) won't be visible.
After the first 30 seconds (i.e., after playing animation), the website's content will be visible, and from now on, no animation won't appear.
Every time I refresh the link, the above three things will happen.

Is it possible to store the animation code somewhere, then importing to do the above?

Introduction of a website with CSS animation

0 Answers