Animated Candles – Simple HTML Code for WordPress

ByVictor
Share on Pinterest

You know those moments when you stumble upon something that makes you go “Aww, this is so cute!”? Well, that’s exactly what happened to me while I was experimenting with CSS animations the other day. I found these adorable animated candles, and customized it so anyone can use it on their WordPress site without any conflicts. I just had to share them with you all!

Animated Candles

What’s So Special ?

What is in the html

First off, they’re not just static images – they’re full of personality!

We’ve got two little candle friends: a tall one that loves to blink and change expressions, and a shorter buddy that’s just as charming with its eye movements. It’s amazing what you can do with pure CSS, right?

And if you watch closely, you’ll see wisps of smoke drifting up from the candles.

There’s even this cool light wave effect that pulses out from the flame, just like a real candle would cast light into a dark room.

dark rooms

Speaking of dark rooms, there’s day-to-night transition in the background that makes the whole scene feel magical.

What I love most about this animation is all the little details. The flame doesn’t just sit there – it dances!

When the background dims, the candlelight really pops – it’s those little touches that make web design fun!

Want These Candles on Your Site?

Here’s the best part – you can add these candles to your own WordPress site in just a few minutes! I’ve made sure the code is WordPress-friendly (trust me, dealing with conflicting styles is no fun, so I took care of that for you).

All you need to do is:

  1. Copy the HTML code into your post where you want the candles to appear
  2. Add the CSS to your theme’s custom CSS section
  3. That’s it! Your candles should start dancing right away

I’ve attached all the code you need below. Feel free to play around with the colors and sizes to match your site’s theme. That’s the beauty of CSS – everything’s customizable!

HTML

<div class="candle-animation-wrapper">
  <div class="ca-wrapper">
    <div class="ca-candles">
      <div class="ca-light__wave"></div>
      <div class="ca-candle1">
        <div class="ca-candle1__body">
          <div class="ca-candle1__eyes">
            <span class="ca-candle1__eyes-one"></span>
            <span class="ca-candle1__eyes-two"></span>
          </div>
          <div class="ca-candle1__mouth"></div>
        </div>
        <div class="ca-candle1__stick"></div>
      </div>
      
      <div class="ca-candle2">
        <div class="ca-candle2__body">
          <div class="ca-candle2__eyes">
            <div class="ca-candle2__eyes-one"></div>
            <div class="ca-candle2__eyes-two"></div>
          </div>
        </div>
        <div class="ca-candle2__stick"></div>
      </div>
      <div class="ca-candle2__fire"></div>
      <div class="ca-sparkles-one"></div>
      <div class="ca-sparkles-two"></div>
      <div class="ca-candle__smoke-one"></div>
      <div class="ca-candle__smoke-two"></div>
    </div>
    <div class="ca-floor"></div>
  </div>
</div>

CSS

<style>
.candle-animation-wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  margin: 0px 0;
  background-color: #FFF;
  animation: ca-change-background 3s infinite linear;
}

@keyframes ca-change-background {
  0%,59%,98%,100% {
    background: #FFF;
  }
  61%,97% {
    background: #000;
  }
}

.ca-wrapper {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: scale(1.5, 1.5) translate(-50%, -50%);
}

.ca-floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  height: 5px;
  background: #673C63;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 5px #111;
  z-index: 2;
}

.ca-candles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 150px;
  transform: translate(-50%, -100%);
  z-index: 1;
}

.ca-candle1 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 35px;
  height: 100px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform-origin: center right;
  transform: translate(60%, -25%);
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: ca-expand-body 3s infinite linear;
}

.ca-candle1__stick, .ca-candle2__stick {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 3px;
  height: 15px;
  background: #673C63;
  border-radius: 8px;
  transform: translate(-50%, -100%);
}

.ca-candle2__stick {
  height: 12px;
  transform-origin: bottom center;
  animation: ca-stick-animation 3s infinite linear;
}

.ca-candle1__eyes, .ca-candle2__eyes {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 35px;
  height: 30px;
  transform: translate(-50%, 0%);
}

.ca-candle1__eyes-one {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: ca-blink-eyes 3s infinite linear;
}

.ca-candle1__eyes-two {
  position: absolute;
  left: 70%;
  top: 20%;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #673C63;
  transform: translate(-70%, 0%);
  animation: ca-blink-eyes 3s infinite linear;
}

.ca-candle1__mouth {
  position: absolute;
  left: 40%;
  top: 20%;
  width: 0px;
  height: 0px;
  border-radius: 20px;
  background: #673C63;
  transform: translate(-50%, -50%);
  animation: ca-uff 3s infinite linear;
}

.ca-candle__smoke-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 30px;
  height: 3px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: ca-move-left 3s infinite linear;
}

.ca-candle__smoke-two {
  position: absolute;
  left: 30%;
  top: 40%;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: grey;
  transform: translate(-50%, -50%);
  animation: ca-move-top 3s infinite linear;
}

.ca-candle2 {
  position: absolute;
  left: 20%;
  top: 65%;
  width: 42px;
  height: 60px;
  background: #fff;
  border: 3px solid #673C63;
  border-bottom: 0px;
  border-radius: 3px;
  transform: translate(60%, -15%);
  transform-origin: center right;
  box-shadow: -2px 0px 0px #95c6f2 inset;
  animation: ca-shake-left 3s infinite linear;
}

.ca-candle2__eyes-one {
  position: absolute;
  left: 30%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: ca-changeto-lower 3s infinite linear;
}

.ca-candle2__eyes-two {
  position: absolute;
  left: 70%;
  top: 50%;
  width: 5px;
  height: 5px;
  display: inline-block;
  border: 0px solid #673C63;
  border-radius: 100%;
  float: left;
  background: #673C63;
  transform: translate(-80%, 0%);
  animation: ca-changeto-greater 3s infinite linear;
}

.ca-light__wave {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 75px;
  height: 75px;
  border-radius: 100%;
  z-index: 0;
  transform: translate(-25%, -50%) scale(2.5, 2.5);
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: ca-expand-light 3s infinite linear;
}

.ca-candle2__fire {
  position: absolute;
  top: 50%;
  left: 40%;
  display: block;
  width: 16px;
  height: 20px;
  background-color: red;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #FF9800;
  transform: translate(-90%, -50%);
  animation: ca-dance-fire 3s infinite linear;
}

@keyframes ca-blink-eyes {
  0%,35% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  36%,39% {
    opacity: 0;
    transform: translate(-70%, 0%);
  }
  40% {
    opacity: 1;
    transform: translate(-70%, 0%);
  }
  50%,65% {
    transform: translate(-140%, 0%);
  }
  66% {
    transform: translate(-70%, 0%);
  }
}

@keyframes ca-expand-body {
  0%,40% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  45%,55% {
    transform: scale(1.1, 1.1) translate(60%, -28%);
  }
  60% {
    transform: scale(0.89, 0.89) translate(60%, -25%);
  }
  65% {
    transform: scale(1, 1) translate(60%, -25%);
  }
  70% {
    transform: scale(0.95, 0.95) translate(60%, -25%);
  }
  75% {
    transform: scale(1, 1) translate(60%, -25%);
  }
}

@keyframes ca-uff {
  0%,40% {
    width: 0px;
    height: 0px;
  }
  50%,54% {
    width: 15px;
    height: 15px;
    left: 30%;
  }
  59% {
    width: 5px;
    height: 5px;
    left: 20%;
  }
  62% {
    width: 2px;
    height: 2px;
    left: 20%;
  }
  67% {
    width: 0px;
    height: 0px;
    left: 30%;
  }
}

@keyframes ca-move-left {
  0%,59%,100% {
    width: 0px;
    left: 40%;
  }
  60% {
    width: 30px;
    left: 30%;
  }
  68% {
    width: 0px;
    left: 20%;
  }
}

@keyframes ca-move-top {
  0%,64%,100% {
    width: 0px;
    height: 0px;
    top: 0%;
  }
  65% {
    width: 10px;
    height: 10px;
    top: 40%;
    left: 40%;
  }
  80% {
    width: 0px;
    height: 0px;
    top: 20%;
  }
}

@keyframes ca-shake-left {
  0%,40% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  50%,54% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  59% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  62% {
    left: 18%;
    transform: translate(60%, -15%);
  }
  65% {
    left: 21%;
    transform: translate(60%, -15%);
  }
  67% {
    left: 20%;
    transform: translate(60%, -15%);
  }
  75% {
    left: 20%;
    transform: scale(1.15, 0.85) translate(60%, -15%);
    background: #fff;
    border-color: #673C63;
  }
  91% {
    left: 20%;
    transform: scale(1.18, 0.82) translate(60%, -10%);
    background: #F44336;
    border-color: #F44336;
    box-shadow: -2px 0px 0px #F44336 inset;
  }
  92% {
    left: 20%;
    transform: scale(0.85, 1.15) translate(60%, -15%);
  }
  95% {
    left: 20%;
    transform: scale(1.05, 0.95) translate(60%, -15%);
  }
  97% {
    left: 20%;
    transform: scale(1, 1) translate(60%, -15%);
  }
}

@keyframes ca-stick-animation {
  0%,40% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  50%,54% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  59% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
  62% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-15deg) translate(-50%, -100%);
  }
  65% {
    left: 50%;
    top: 0%;
    transform: rotateZ(15deg) translate(-50%, -100%);
  }
  70% {
    left: 50%;
    top: 0%;
    transform: rotateZ(-5deg) translate(-50%, -100%);
  }
  72% {
    left: 50%;
    top: 0%;
    transform: rotateZ(5deg) translate(-50%, -100%);
  }
  74%,84% {
    left: 50%;
    top: 0%;
    transform: rotateZ(0deg) translate(-50%, -100%);
  }
  85% {
    transform: rotateZ(180deg) translate(0%, 120%);
  }
  92% {
    left: 50%;
    top: 0%;
    transform: translate(-50%, -100%);
  }
}

@keyframes ca-expand-light {
  10%,29%,59%,89% {
    transform: translate(-25%, -50%) scale(0, 0);
    border: 2px solid rgba(255, 255, 255, 0);
  }
  90%,20%,50% {
    transform: translate(-25%, -50%) scale(1, 1);
  }
  95%,96%,26%,27%,56%,57% {
    transform: translate(-25%, -50%) scale(2, 2);
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  0%,28%,58%,100% {
    transform: translate(-25%, -50%) scale(2.5, 2.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
}

@keyframes ca-dance-fire {
  59%,89% {
    left: 40%;
    width: 0px;
    height: 0px;
  }
  90%,0%,7%,15%,23%,31%,39%,47%,55% {
    left: 40.8%;
    width: 16px;
    height: 20px;
    background: #FFC107;
  }
  94%,3%,11%,19%,27%,35%,43%,51%,58% {
    left: 41.2%;
    width: 16px;
    height: 20px;
    background: #FF9800;
  }
}

@keyframes ca-changeto-lower {
  0%,70%,90% {
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-90%, 0%);
  }
  71%,89% {
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(-45deg) translate(-50%, -65%);
    -webkit-transform: rotate(-45deg) translate(-50%, -65%);
  }
}

@keyframes ca-changeto-greater {
  0%,70%,90% {
    top: 50%;
    padding: 0px;
    display: inline-block;
    border-radius: 100%;
    background: #673C63;
    border-width: 0 0 0 0;
    border: 0px solid #673C63;
    transform: translate(-80%, 0%);
  }
  71%,89% {
    top: 30%;
    background: none;
    border: solid #673C63;
    border-radius: 0px;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 1px;
    float: left;
    transform-origin: bottom left;
    transform: rotate(135deg) translate(-80%, 20%);
    -webkit-transform: rotate(135deg) translate(-80%, 20%);
  }
}
</style>

A Little Behind-the-Scenes

If you’re curious about how this works, it’s all powered by CSS animations. No JavaScript, no plugins – just pure CSS magic! The expressions, movements, and even that mesmerizing flame effect are created using keyframe animations. It’s pretty amazing what CSS can do these days.

Let’s Chat!

Have you tried adding animations to your WordPress site before? How did it go? I’d love to hear your experiences in the comments below. And if you end up using these candles on your site, please share a link – I’d be thrilled to see them in action on different websites!

Until next time, keep making the web a more delightful place! 🕯️✨

P.S. If you found this helpful, don’t forget to share it with your fellow WordPress enthusiasts. And stay tuned!

Leave a Reply

Your email address will not be published. Required fields are marked *