CSS Animations

Animaciones infinitas con @keyframes. Float, pulse y spin son las tres más usadas en landings.

float

pulse

spin

Código

/* CSS */
@keyframes float {
  0%, 100% { transform: translateY(0px) }
  50%       { transform: translateY(-20px) }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1 }
  50%       { transform: scale(1.15); opacity: 0.7 }
}

@keyframes spin {
  from { transform: rotate(0deg) }
  to   { transform: rotate(360deg) }
}

/* Uso */
<div style={{ animation: "float 3s ease-in-out infinite" }} />
<div style={{ animation: "pulse 2s ease-in-out infinite" }} />
<div style={{ animation: "spin 1.5s linear infinite" }} />