futbol-animated-svg/styles.css

An animated SVG depicting a futbol/soccer ball, in color, with animations during hover and outside of hover state.

#root {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
  }
  
  #futbol {
    animation: roll 5.45s infinite
  }
  
  #futbol:hover {
    animation: kicked 1.25s linear infinite
  }
  
  @keyframes kicked {
    0% {
      transform: translateY(0%) rotate(0deg) translateX(0%);
      transform-origin: center;
    }
    25% {
      transform: translateY(-40%) rotate(90deg);
      transform-origin: center;
    }
    50% {
      transform: translateY(-80%) rotate(180deg);
      transform-origin: center;
    }
    75% {
      transform: translateY(-40%) rotate(270deg);
      transform-origin: center;
    }
    100% {
      transform: translateY(0%) rotate(360deg);
      transform-origin: center;
    }
  }
  
  @keyframes roll {
    0% {
    transform-origin: center;
    transform: translateX(0px) rotate(0deg);
    }
    25% {
    transform-origin: center;
    transform: translateX(10px) rotate(90deg);
    }
    50% {
    transform-origin: center;
    transform: translateX(-10px) rotate(0deg);
    }
    75% {
    transform-origin: center;
    transform: translateX(20px) rotate(180deg);
    }
    100% {
    transform-origin: center;
    transform: translateX(0) rotate(0deg);
    }
  }