Skip to content

Instantly share code, notes, and snippets.

@ambethia
Created February 28, 2016 23:16
Show Gist options
  • Select an option

  • Save ambethia/5edbfd5d75a2ec316cdb to your computer and use it in GitHub Desktop.

Select an option

Save ambethia/5edbfd5d75a2ec316cdb to your computer and use it in GitHub Desktop.
Ruby script to generate CSS animation keyframes for a rotating font icon who's text-shadow stays at the same angle
L = 0.15
S = 8
(S+1).times do |i|
time = (100.0 / S) * i
angle = ((360 / S) * i)
theta = ((angle % 360) * -1) * Math::PI / 180
x = L * Math.cos(theta) - L * Math.sin(theta)
y = L * Math.sin(theta) + L * Math.cos(theta)
values = {
step: time,
angle: angle,
x: ['%.2g' % x.round(2), ('rem' if x.abs > 0.001)].join,
y: ['%.2g' % y.round(2), ('rem' if y.abs > 0.001)].join
}
keyframe =<<-EOF % values
%<step>.10g%% {
transform: rotate(%{angle}deg);
text-shadow: %{x} %{y} 0 #333;
}
EOF
puts keyframe
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment