DVDBox.js

import React from "react";
import styled, { keyframes } from "styled-components";

// PIXELS per SECOND
const RATE = 100;

class DVDBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      moving: false
    };
    this.boxWidth = 100;
    this.boxHeight = 100;
  }

  refCallback = element => {
    if (element) {
      const { width, height } = element.getBoundingClientRect();
      const xDistance = width - this.boxWidth;
      const xTime = xDistance / RATE;
      const xKeyframe = keyframes`
        0% {
          transform: translateX(0px);
        }
        50% {
          transform: translateX(${xDistance}px);
        }
        100% {
          transform: translateX(0px);
        }
      `;
      this._StyledXDiv = styled.div`
        animation-name: ${xKeyframe};
        animation-duration: ${xTime}s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      `;
      const yDistance = height - this.boxHeight;
      const yTime = yDistance / RATE;
      const yKeyframe = keyframes`
        0% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(${yDistance}px);
        }
        100% {
          transform: translateY(0px);
        }
      `;
      this._StyledYDiv = styled.div`
        animation-name: ${yKeyframe};
        animation-duration: ${yTime}s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
      `;
      this.setState({
        moving: true
      });
    }
  };

  render() {
    const divStyle = {
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      position: "absolute",
      pointerEvents: "none"
    };
    const dvdLogoStyle = {
      width: this.boxWidth,
      height: this.boxHeight,
      backgroundColor: "blue",
      visibility: "visible"
    };

    const XDiv = this._StyledXDiv;
    const YDiv = this._StyledYDiv;
    const inner = this.state.moving ? (
      <XDiv>
        <YDiv>
          <div style={dvdLogoStyle} />
        </YDiv>
      </XDiv>
    ) : null;

    return (
      <div ref={this.refCallback} style={divStyle}>
        {inner}
      </div>
    );
  }
}