Exercise #23 - Animations

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Exercise #23 - Animations</title>
 <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
 <link rel="stylesheet" href="iphone.css" />
 <style>
body {
  background: #8acdeb;
}
#container {
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.steam {
  position: absolute;
  height: 75px;
  width: 75px;
  border-radius: 50%;
  background-color: #fff;
  margin-top: -38px;
  margin-left: 38px;
  z-index: 0;
  opacity: 0;
}
#steam1 {
  -webkit-animation: steam1 4s ease-out infinite;
  animation: steam1 4s ease-out infinite;
}
#steam3 {
  -webkit-animation: steam1 4s ease-out 1s infinite;
  animation: steam1 4s ease-out 1s infinite;
}
@-webkit-keyframes steam1 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;}
}
@keyframes steam1 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(-20px) scale(1); opacity: 0;}
}
#steam2 {
  -webkit-animation: steam2 4s ease-out 0.5s infinite;
  animation: steam2 4s ease-out 0.5s infinite;
}
#steam4 {
  -webkit-animation: steam2 4s ease-out 1.5s infinite;
  animation: steam2 4s ease-out 1.5s infinite;
}
@-webkit-keyframes steam2 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;}
}
@keyframes steam2 {
  0% {transform: translateY(0) translateX(0) scale(0.25); opacity: 0.2;}
  100% {transform: translateY(-200px) translateX(20px) scale(1); opacity: 0;}
}
#cup {
  z-index: 1;
}
#cup-body {
  position: absolute;
  height: 100px;
  width: 150px;
  border-radius: 0 0 75px 75px;
  background-color: #fff;
  margin: auto;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
}
#cup-shade {
  position: relative;
  height: 150px;
  width: 100px;
  background-color: #F3F3F3;
  display: inline-block;
  margin-left: 42%;
  margin-top: -3px;
  transform: rotate(50deg);
  z-index: 1;
}
#cup-handle {
  position: relative;
  height: 38px;
  width: 40px;
  border-radius: 0 38px 38px 0;
  border: 15px solid #F3F3F3;
  margin-bottom: 45px;
  margin-left: 125px;
  display: inline-block;
  z-index: 0;
}
#saucer {
  position: absolute;
  height: 15px;
  width: 150px;  
  border-radius: 0 0 50px 50px;
  background-color: #F9F9F9;
  margin-top: -32px;
  margin-left: 5px;
  z-index: 2;
}
#shadow {
  height: 5px;
  width: 150px;
  border-radius: 50%;
  margin-top: -5px;
  margin-left: 6px;
  background-color: #7bb8d4;
}
#endlesscup {
  position:absolute;
  top:0px;
  right:0px;
  font-family:sans-serif;
  color:white;
  font-weight:bold;
}	
</style>
</head>
<body>
<p style="float:right; font-family:sans-serif; font-weight:bold; color:white; font-size:1.1em;">Enjoy our "endless cup of coffee" available from 7:00 a.m. to 10:00 p.m. every day.</p>
<div id="container">
    <div class="steam" id="steam1"> </div>
	<div class="steam" id="steam2"> </div>
	<div class="steam" id="steam3"> </div>
	<div class="steam" id="steam4"> </div>
	<div id="cup"></p>
		<div id="cup-body">
			<div id="cup-shade"></div>
		</div>
		<div id="cup-handle"></div>
	</div>
	<div id="saucer"></div>
	<div id="shadow"></div>
	<div id="endlesscup"></div>
</div>
<div class="item15"></span>
  <p style="text-align:center;">Copyright © 2024 Sea Fairy Bakery<br>
   For additional information, contact: <a href="mailto:info@seafairybakery.com">Lola Smith</a></p>
</div>
</div>
</body>
</html>