Упоротые анимации

by Nikolay Vasilchuk

HTML

<div class="hearts-button">
  <svg class="heart-button-icon" viewBox="0 0 32 29.6">
    <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
  </svg>
</div>
<div class="hearts"></div>

<template class="heart-template"><svg class="heart" viewBox="0 0 32 29.6"><path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
    c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/></svg></template>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.hearts-button {
  z-index: 5;
  position: fixed;
  right: 50px;
  bottom: 50px;
  width: 54px;
  height: 54px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 1px 1px 2px 0 #aaa;
  opacity: .7;
  cursor: pointer;
  transition: opacity .1s linear;
}
.heart-button-icon {
  position: absolute;
  fill: red;
  bottom: 10px;
  left: 10px;
  width: 34px;
}
.hearts-button:hover {
  opacity: 1;
}
.hearts-button:active {
  box-shadow: 0 0 1px 0 #aaa;
  transform: translate(1px, 1px);
}

.hearts {
  z-index: 1;
  position: fixed;
  right: 60px;
  bottom: 60px;
  width: 34px;
  height: 0;
}

.heart-template {
  display: none;
}

.heart {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.color1 { fill: red; }
.color2 { fill: green; }
.color3 { fill: blue; }
.color4 { fill: purple; }
.color5 { fill: orange; }
.color6 { fill: aqua; }
.color7 { fill: darksalmon; }

.animation1 {
  animation: heart-opacity 5s ease-in forwards,
             heart-pulse 1s ease-in-out alternate infinite,
             heart-vertical-move1 5s forwards,
             heart-hotisontal-move1 5s forwards,
             heart-rotate1 5s forwards;
}
.animation2 {
  animation: heart-opacity 5s ease-in forwards,
             heart-pulse 1s ease-in-out alternate infinite,
             heart-vertical-move2 5s forwards,
             heart-hotisontal-move1 5s ease-out forwards,
             heart-rotate1 5s forwards;
}
.animation3 {
  animation: heart-opacity 5s ease-in forwards,
             heart-pulse 1s ease-in-out alternate infinite,
             heart-vertical-move3 5s forwards,
             heart-hotisontal-move1 5s ease-out forwards,
             heart-rotate1 5s forwards;
}
.animation4 {
  animation: heart-opacity 5s ease-in forwards,
             heart-pulse 1s ease-in-out alternate infinite,
             heart-vertical-move1 5s forwards,
             heart-hotisontal-move2 5s forwards,
            ...

JavaScript

var button = document.querySelector('.hearts-button'),
    template = document.querySelector('.heart-template').innerHTML,
    container = document.querySelector('.hearts');

function createHeart(classes) {
	var div = document.createElement('div');
  div.innerHTML = template;
  var heart = div.firstChild;
  heart.classList.add.apply(heart.classList, classes);
	container.appendChild(heart);
  heart.addEventListener('animationend', function(e) {
  	if (e.animationName === 'heart-opacity') {
    	container.removeChild(heart);
    }
  });
  return heart;
}

function getColorClass() {
	var MAX_COLOR = 7;
  return 'color' + (Math.floor(Math.random() * MAX_COLOR) + 1);
}

function getAnimationClass() {
	var MAX_ANIMATION = 6;
  return 'animation' + (Math.floor(Math.random() * MAX_ANIMATION) + 1);
}

button.addEventListener('click', function() {
	createHeart([getAnimationClass(), getColorClass()]);
//  createHeart(['animation1', getColorClass()]);
});