Keyframe Animation Example[edit]

<!DOCTYPE HTML>
<head>
<title>CSS Keyframes Animation</title> 
<meta name="description" content="CSS keyframes animation"/> 
<style>
body {
background: linear-gradient(to right, #5f2c82, #49a09d); } #fish{
position: absolute;
height: 84px;
width: 63px;
top: 0px;
left: 500px;
animation-name: fishkey; animation-duration: 5s; animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse; 
} @keyframes fishkey {
0%    { top: 300px }
50%   { top: 200px ; left: 500px} 90%   { top: 400px ; left: 100px} 100%  { top: 300px }
} #fish1 {
position: absolute;
height: 87px;
width: 127px;
top: 100px;
left: 200px;
animation-name: fish1key; animation-duration: 6s; animation-delay: 0s;
animation-iteration-count: infinite;
} @keyframes fish1key {
0%    { left: 10px}
100%  { left: 200px }
} #fish2 {
position: absolute;
height: 76px;
width: 139px;
top: 0px;
left: 500px;
animation-name: fish2key; animation-duration: 5s; animation-delay: 0s;
animation-iteration-count: infinite;
} @keyframes fish2key {
0%    { top: 100px }
50%   { top: 200px; left: 100px } 100%  { top: 300px }
} #fish3 {
position: absolute;
height: 128px;
width: 92px;
top: 300px;
left: 100px;
animation-name: fish3key; animation-duration: 7s; animation-delay: 0s;
animation-iteration-count: infinite;
} @keyframes fish3key {
0%    { top: 100px }
50%   { top: 300px }
100%  { top: 350px }
} #fish4 {
position: absolute;
height: 96px;
width: 96px;
top: 400px;
left: 600px;
animation-name: fish4key; animation-duration: 20s; animation-delay: 0s;
animation-iteration-count: infinite;
} @keyframes fish4key {
0%    { left: 300px }
100%  { left: 100px }
} 
</style>
</head>
<body>
<h1>CSS Keyframes Animation</h1> 
<img id="aquarium" src="./assets/aquarium.png"/> 
<img id="fish" src="./assets/fishSeahorse.png"/>
<img id="fish1" src="./assets/fishWifi.png"/> 
<img id="fish2" src="./assets/fishZombie.png"/> 
<img id="fish3" src="./assets/jellyfish.png"/> 
<img id="fish4" src="./assets/starfish.png" /> 
</body>
</html>

Magic 8ball Example[edit]

<!DOCTYPE HTML>
<html lang="en-us">
<head>
  <meta charset="utf-8" />
  <title>Magic 8 ball</title>
  <meta name="description" content="trivia" />
<style>
body {
  text-align: center;
  background: linear-gradient(to right, #89fffd, #ef32d9);
}
h1 {
  font-size:60px
  font-family: "Comic Sans MS", cursive, sans-serif;
  color:#4B0082
}
</style>
<h1>Crystal Ball </h1>
</head>
<body>
  <style>
  h2 {
    font-size:30px
    font-family: "Comic Sans MS", cursive, sans-serif;
    color: #4B0082
  }
  </style>
  <h2><em>Crystal Ball!!</em></h2>
<body>
<h2>Ask a question down below!</h2>
<input id="nameInput" type="text"/>
<input type="button" value="submit" onclick="prank();"/>
<p id="result"></p>
<img id="gypsy" alt="gypsy" width="600px" height="400px" src="./assets/gypsy.png" />
<script>
var sadSound = new Audio("./assets/sad.mp3");
var happySound = new Audio("./assets/happy.mp4");
var okSound = new Audio("./assets/ok.mp3");
function prank() {
var number = Math.floor((Math.random() * 8) + 1);
  if (number == 1) {
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
    happySound.play();
  }
  else if (number == 2) {
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
    sadSound.play();
  }
  else if (number == 3){
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
  sadSound.play()
  }
  else if (number == 4){
  document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
  happySound.play()
  }
  else if (number == 5){
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
  okSound.play()
  }
  else if (number == 6){
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
  sadSound.play()
  }
  else if (number == 7){
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
  happySound.play()
  }
  else if (number == 8){
    document.getElementById("gypsy").src = "./assets/gypsy" + number + ".png";
  okSound.play()
  }
}
</script>
</body>
</html>
</body>
</html>