Floating Animated Hearts

In this example below you will see how to do a Floating Animated Hearts with some HTML / CSS and Javascript

Had to animate some hearts for a project--so I put them here. Edit this, fork this, destroy this at your leisure.

This awesome code was written by 10Dimensional, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 10Dimensional ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Floating Animated Hearts</title>
  <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <link rel='stylesheet prefetch' href='https://db.tt/4VuE85Y5'>

      <link rel="stylesheet" href="css/style.css">



  <div class="container">
  <div class="bear">
    <h2>Chill bear loves honey.</h2>
    <img src="https://db.tt/4VuE85Y5" class="bear">
  <img src="https://db.tt/SdQlCWWD" class="move1 heart"/>
  <img src="https://db.tt/SdQlCWWD" class="move2 heart"/>
  <img src="https://db.tt/SdQlCWWD" class="move3 heart"/>



/*Downloaded from https://www.codeseek.co/10Dimensional/floating-animated-hearts-MKpbrz */
/* Did not inlude all vendor prefixes because ¯\_(ツ)_/¯ */
body {
  font-size: 13px;  

h2 {
  font-family: 'Pacifico', cursive;
  font-size: 3.5em;
  text-align: center;
  color: #ffc832;

.container {
  position: relative;
  width: 300px;
  margin: 0 auto;

.bear {
  width: 100%;  

.heart {
  position: absolute;

.bear {

@keyframes heart-move-one {
	0% {-webkit-transform: translate(0, 0)}
	20% {-webkit-transform: translate(0em, .2em) rotate(-5deg)}
  40% {-webkit-transform: translate(0em, .4em) rotate(-10deg)}
  60% {-webkit-transform: translate(-.1em, .2em) rotate(-15deg)}
  80% {-webkit-transform: translate(-.3em, .3em) rotate(-10deg)}
  100% {-webkit-transform: translate(0em, 0em)}

@keyframes heart-move-two {
	0% {-webkit-transform: translate(0, 0) rotate(-55deg)}
	10% {-webkit-transform: translate(0em, .1em) rotate(-50deg)}
  20% {-webkit-transform: translate(.1em, .3em) rotate(-45deg)}
  40% {-webkit-transform: translate(.3em, .4em) rotate(-40deg)}
  50% {-webkit-transform: translate(.2em, .5em) rotate(-40deg)}
  60% {-webkit-transform: translate(.1em, .3em) rotate(-45deg)}
  80% {-webkit-transform: translate(.2em, .1em) rotate(-50deg)}
  100% {-webkit-transform: translate(0em, 0em) rotate(-55deg)}

@keyframes heart-move-three {
	0% {-webkit-transform: translate(0, 0) rotate(5deg)}
	20% {-webkit-transform: translate(0em, .3em) rotate(0deg)}
  40% {-webkit-transform: translate(.1em, .5em) rotate(-5deg)}
  50% {-webkit-transform: translate(.3em, .6em) rotate(-10deg)}
  60% {-webkit-transform: translate(.6em, .5em) rotate(-15deg)}
  70% {-webkit-transform: translate(.4em, .4em) rotate(-10deg)}
  80% {-webkit-transform: translate(.3em, .3em) rotate(-5deg)}
  90% {-webkit-transform: translate(.2em, .2em) rotate(0deg)}
  100% {-webkit-transform: translate(0em, 0em) rotate(5deg)}

.move1 {
  animation: heart-move-one 4s infinite linear;
  width: 1em;
  top: 9.3em;
  left: 16em;

.move2 {
  animation: heart-move-two 4s infinite linear;
  width: 2.1em;
  top: 8em;
  left: 5.3em;

.move3 {
  animation: heart-move-three 3.8s infinite linear;
  width: 3em;
  top: 6em;
  left: 14em;