dropshado.ws

Match CSS animation keyframe transforms (opens in new tab)

My loader spinner wasn’t spinning. .loader-spinner { animation: spinLoader 600ms steps(12, end) infinite; } @keyframes spinLoader { from { transform: translate( -50%, -50% ); } to { transform: translate( -50%, -50% ) rotate(1turn); } } The problem was that the keyframes for transform need to match. Even though there’s an implicit rotate(0turn) in the transform value, it’s required to be explicit for animation keyframes. @keyframes spinLoader { /* match transform values */ from { transform: tr...

Read the original article
Sign in to keep reading the full article.

Keyboard Shortcuts

Navigation

Next / previous post
j/k
Open post
oorEnter
Preview post
v

Post Actions

Love post
a
Like post
l
Dislike post
d
Undo reaction
u
Save / unsave
s

Recommendations

Add interest / feed
Enter
Not interested
x

Go to

Home
gh
Interests
gi
Feeds
gf
Likes
gl
History
gy
Changelog
gc
Settings
gs
Discover
gb
Search
/

General

Show this help
?
Submit feedback
!
Close modal / unfocus
Esc

Press ? anytime to show this help