CSS Animation | HTML, CSS & JavaScript

<div class="card">
  <div class="preview"><button class="btn">Button</button></div>
  <div class="code"><div class="title">1. Pulse Button</div></div>
</div>

<div class="card">
  <div class="preview"><h2 class="typing">Web Developer</h2></div>
  <div class="code"><div class="title">2. Typing Loop</div></div>
</div>

<div class="card">
  <div class="preview"><div class="loader"></div></div>
  <div class="code"><div class="title">3. Spinner Loader</div></div>
</div>

<div class="card">
  <div class="preview"><div class="hover-card">Floating</div></div>
  <div class="code"><div class="title">4. Floating Card</div></div>
</div>

<div class="card">
  <div class="preview"><div class="bg"></div></div>
  <div class="code"><div class="title">5. Gradient Loop</div></div>
</div>

<div class="card">
  <div class="preview"><div class="ball"></div></div>
  <div class="code"><div class="title">6. Bouncing Ball</div></div>
</div>

<div class="card">
  <div class="preview">
    <h2 class="wave">
      <span>W</span><span>A</span><span>V</span><span>E</span>
    </h2>
  </div>
  <div class="code"><div class="title">7. Wave Text</div></div>
</div>

<div class="card">
  <div class="preview"><div class="square"></div></div>
  <div class="code"><div class="title">8. Rotating Square</div></div>
</div>

<div class="card">
  <div class="preview"><div class="heart">❤️</div></div>
  <div class="code"><div class="title">9. Heart Beat</div></div>
</div>

body {
  margin: 0;
  font-family: Arial;
  background: #111;
  color: white;
  padding: 20px;
}

/* CARD */
.card {
  display: flex;
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  background: #1e1e1e;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.preview {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  padding: 20px;
}

.code {
  width: 60%;
  padding: 20px;
}

.title {
  color: #ff6a00;
  margin-bottom: 10px;
}

pre {
  background: #000;
  padding: 15px;
  border-radius: 8px;
  color: #0f0;
  font-size: 13px;
}

/* 1 BUTTON */
.btn {
  padding: 12px 24px;
  background: #222;
  border: none;
  color: white;
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.1); box-shadow: 0 0 20px #ff6a00; }
}

/* 2 TYPING */
.typing {
  overflow: hidden;
  border-right: 3px solid;
  white-space: nowrap;
  width: 0;
  animation: typing 3s steps(15) infinite, blink 0.5s infinite;
}
@keyframes typing {
  0% { width: 0 }
  50% { width: 180px }
  100% { width: 0 }
}
@keyframes blink {
  50% { border-color: transparent; }
}

/* 3 LOADER */
.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #ddd;
  border-top: 5px solid #ff6a00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* 4 FLOAT CARD */
.hover-card {
  padding: 20px 40px;
  background: #222;
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 5 GRADIENT */
.bg {
  width: 200px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(270deg, #ff6a00, #ee0979, #00c6ff);
  background-size: 600% 600%;
  animation: gradientMove 6s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 6 BOUNCE */
.ball {
  width: 40px;
  height: 40px;
  background: #ff6a00;
  border-radius: 50%;
  animation: bounce 1s infinite ease-in-out;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
}

/* 7 WAVE TEXT */
.wave span {
  display: inline-block;
  animation: wave 1s infinite;
}
.wave span:nth-child(1){animation-delay:0s;}
.wave span:nth-child(2){animation-delay:0.1s;}
.wave span:nth-child(3){animation-delay:0.2s;}
.wave span:nth-child(4){animation-delay:0.3s;}

@keyframes wave {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* 8 ROTATE */
.square {
  width: 50px;
  height: 50px;
  background: #00c6ff;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}

/* 9 HEART */
.heart {
  font-size: 40px;
  animation: beat 1s infinite;
}
@keyframes beat {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

- CSS Animation

Live Preview