WangLu's Notes

TLDR: This article is NOT about cubic-bezier(), and it is not about layered CSS animations (for X and Y axes respectively). It is about carefully crafted combined animation, that moves an element along any quadratic/cubic Bezier curve. UPDATE: Here's the link to part 2 . Following my previous post , I continued investigating competing CSS animations, which are two or more CSS animations affecting the same property. I observed that two animations may "compete". In the following example, the box has two simple linear animations, move1 and move2. It turns out the box actually moves along a curved path: See the Pen CSS Bezier Path by Lu Wang ( @coolwanglu ) on CodePen . So clearly it must be the combined effects from both animations. Note that in move2, the `from` keyframe was not specified. It'd look like this if it is specified: See the Pen For Blog 2022-08-02 by Lu Wang ( @coolwanglu ) on CodePen . In this case, it seems only the second animation take

[2022-08-04 Update] Most of my observations seems confirmed in the CSS animation spec . I stumped upon this youtube video . Then after some discussion with colleages,  I was really into CSS-only projects. Of course I'd start with a rotating cube: See the Pen CSS 3d Animation Test by Lu Wang ( @coolwanglu ) on CodePen . Then I built this CSS-only first person (rail) shooter: See the Pen CSS-Only Wolfenstein by Lu Wang ( @coolwanglu ) on CodePen . It was lots of fun. Especially I learned about the checkbox hack .  However there were two problems that took me long to solve. 1. Move from in the middle of an animation The desired effect is: An element is moving from point A to point B. If something is clicked, the element should move from its current state (somewhere between A and B, in the middle of the animation/transition) to another point C. This is for the last hit of the boss, the boss is fastly moving. I'd like the boss to slowly move to the center if being