For the longest time I assumed that one couldn’t use CSS Transitions or animations to move DOM objects in anything but a straight path. Sure, a developer could use multiple keyframes to create a list of straight paths to simulate a curve, but I didn’t think one could just define a curve with just two keyframes. I was wrong. If you are coding for a modern web browser, then this is very doable!. This article will show you how it’s done in modern browsers, the math involved, and what to do with older versions of IE that don’t support CSS3 Animations.
CARVIEW |
Select Language
HTTP/2 200
content-type: text/html; charset=UTF-8
x-ws-ratelimit-limit: 1000
x-ws-ratelimit-remaining: 999
date: Sat, 11 Oct 2025 07:42:03 GMT
server: Apache
x-powered-by: PHP/8.3.26
link: ; rel="https://api.w.org/", ; rel="alternate"; title="JSON"; type="application/json"
content-encoding: gzip
transition
Skip to Main Content
Skip to Main Navigation
User Agent Man ·
Discoveries of a Client Side Web Developer
Categories
Entries Tagged as 'transition'
Animating Circular Paths Using CSS3 Animations.
March 3rd, 2013 by zoltan · 15 Comments
Tags: animation · animation · CSS · CSS3 · JavaScript · math · transform · transition
© 2009 - 2025 — Zoltan "Du Lac" Hawryluk