heartAnimate.js

import React, { Component } from 'react'
import favicon from '../../assets/images/favicon.ico'

class HeartItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      elems: []
    }

    this.complete = 0
  }

  componentWillMount() {
    const count = Math.round(Math.random() * 10 + 10)
    const styleSheet = document.styleSheets[0]
    const elems = []

    for (let i = 0; i < count; i++) {
      const animationName = `animation${Math.round(Math.random() * 100)}`

      const ranTop = Math.round(Math.random() * 50 + 20)
      const ranLeft = Math.round(Math.random() * 20)
      const keyframes =
      `@keyframes ${animationName} {
          0% { opacity: 1; }
          50% { top: ${ranTop}%; left: ${i % 2 === 0 ? 50 + ranLeft : 50 - ranLeft}%; }
          100% { top: ${ranTop + 20}%; left: ${i % 2 === 0 ? 55 + ranLeft : 45 - ranLeft}%; }
      }`
      const keyframes2 =
      `@keyframes rotateLeft {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }`
      const keyframes3 =
      `@keyframes rotateRight {
          0% { transform: rotate(360deg); }
          100% { transform: rotate(0deg); }
      }`

      styleSheet.insertRule(keyframes, styleSheet.cssRules.length)
      styleSheet.insertRule(keyframes2, styleSheet.cssRules.length)
      styleSheet.insertRule(keyframes3, styleSheet.cssRules.length)

      const style = {
        position: 'absolute',
        top: '100%',
        left: '50%',
        width: 50,
        opacity: 0,
        animationName: `${i % 2 === 0 ? 'rotateLeft' : 'rotateRight'}, ${animationName}`,
        animationTimingFunction: 'ease-in-out',
        animationDuration: '1s, 2s',
        animationDelay: `0s, ${Math.random() * 3}s`,
        animationIterationCount: 'infinite, 1',
        animationDirection: 'normal',
        animationFillMode: 'forwards'
      }
      elems.push(style)
    }

    this.setState({ elems })
  }

  onAnimationEnd = () => {
    this.complete++
    if (this.complete === this.state.elems.length) {
      this.props.onAnimationEnd()
    }
  }

  render() {

    const elems = this.state.elems.map((value, key) => {
      return (
        <img key={key} src={favicon} style={value} onAnimationEnd={this.onAnimationEnd} />
      )
    })

    return elems
  }
}

export default HeartItem