“Hypnotic” Logo Animation

Learn how to create “Hypnotic” Logo Animation using html, css and/or js.

<div id="watch">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocketwatch-no-second-hand.png" alt="Pocketwatch on chain" class="watch">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/second-hand.png" alt="Pocketwatch second hand" class="seconds">
</div>
<h1>DR. DEMENTO</h1>
<hr>
<h2>HYPNOTHERAPY SERVICES</h2>
<style>
@import url(https://fonts.googleapis.com/css?family=Hammersmith+One);

@keyframes sway { 
	to { transform: rotate(30deg);   } 
}
@keyframes fade {
	to { opacity: 1; }
}
@keyframes widen {
	to { width: 40%; }
}
@keyframes secondcount {
	to { transform: rotate(355deg); }
}
* { box-sizing: border-box; } 
body { 
  margin: 0;
  background: #111;
  color: #fff;
  text-align: center; 
  font-family: 'Hammersmith One', sans-serif; 
} 
body > * { position: relative; } 
#watch { 
  width: 12vw; height: auto;
  margin: 0 auto;
  transform-origin: center top;
  transform: rotate(-30deg); 
  top: -10px; 
  animation: sway 2.2s infinite alternate ease-in-out;
} 
#watch img.watch { width: 100%; height: auto; }
img.seconds { 
  position: absolute;
  width: 8%; height:auto;
  bottom: 11.75%; left: 45%;
  transform-origin: center 72.4%;
  animation: secondcount 60s infinite linear; 
}
h1 { 
  font-size: 10vw;
  top: -35vw; text-shadow: 0 0 3px 4px rgba(0,0,0,0.3);
  opacity: 0;
  animation: fade 4s 2s forwards; 
}
h2 { 
  font-weight: 100;
  font-size: 3vw; 
  top: -20vw;
  letter-spacing: .2vw;
  opacity: 0;
  animation: fade 2s 7s forwards; 
}
hr { 
  border: none;
  width: 0%; color: #777;
  height: 1px;
  background-color: #777;
  top: -20vw;
  animation: widen 2s 5s forwards;
}
</style>

“Hypnotic” Logo Animation

Random HTML Example Codes: