$faa-ring-speed: 2s; @keyframes ring { 0% { transform: rotate(-15deg); } 2% { transform: rotate(15deg); } 4%, 12% { transform: rotate(-18deg); } 6%, 14% { transform: rotate(18deg); } 8% { transform: rotate(-22deg); } 10% { transform: rotate(22deg); } 16% { transform: rotate(-12deg); } 18% { transform: rotate(12deg); } 20%, 100% { transform: rotate(0deg); } } .faa-ring.animated, .faa-ring.animated-hover:hover, .faa-parent.animated-hover:hover > .faa-ring { animation: ring $faa-ring-speed ease infinite; transform-origin-x: 50%; transform-origin-y: 0px; transform-origin-z: initial; } .faa-ring.animated.faa-fast, .faa-ring.animated-hover.faa-fast:hover, .faa-parent.animated-hover:hover > .faa-ring.faa-fast { animation: ring ($faa-ring-speed * $faa-speed-coeff-fast) ease infinite; } .faa-ring.animated.faa-slow, .faa-ring.animated-hover.faa-slow:hover, .faa-parent.animated-hover:hover > .faa-ring.faa-slow { animation: ring ($faa-ring-speed * $faa-speed-coeff-slow) ease infinite; }