Master Web Motion: Linear, Curved & Path Animations with CSS, SVG, and JavaScript

Animation is a series of static frames shown quickly enough to create the illusion of motion, and web developers often need to animate movement such as translation, deformation, or opacity changes.

Linear movement with CSS

Define a @keyframes rule that specifies transform: translate(x, y) at various percentages and apply it to an element via the animation property.

.cray {
  animation: move 2s alternate infinite;
}

@keyframes move {
  0%   { transform: translate(0, 0); }
  30%  { transform: translate(100px, 0); }
  60%  { transform: translate(100px, 100px); }
  100% { transform: translate(200px, 0); }
}

Curved movement

Using transform-origin together with rotate can produce a circular‑arc motion, but the curve is limited to a portion of a circle and hard to control. A more flexible approach is to decompose the curve into separate horizontal and vertical motions.

Path movement with SVG

SVG <animateMotion> follows a defined <path>, allowing complex trajectories that are difficult to split into simple directions.

<svg width="420px" height="260px" viewBox="0 0 420 260" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g stroke="#979797" stroke-width="1" fill="none">
    <path id="motionPath" d="M370.378234,219.713623 C355.497359,218.517659 ..."/>
  </g>
  <g id="cray" transform="translate(0, -24)" stroke="#979797">
    <image id="cray-img" xlink:href="http://7xt5iu.com1.z0.glb.clouddn.com/img/cray.png" x="0" y="0" width="100px"/>
  </g>
  <animateMotion xlink:href="#cray" dur="5s" begin="0s" fill="freeze" repeatCount="indefinite" rotate="auto-reverse">
    <mpath xlink:href="#motionPath"/>
  </animateMotion>
</svg>

JavaScript with Greensock

Greensock’s TweenMax combined with MorphSVGPlugin can convert an SVG path to a Bezier curve and animate any DOM element along it.

var hill = document.getElementById('hill');
var path = MorphSVGPlugin.pathDataToBezier("#motionPath");
TweenMax.to(hill, 5, {
  bezier: { values: path, type: "cubic", autoRotate: 180 },
  ease: Linear.easeNone,
  repeat: -1
});

Exporting After Effects keyframes

Tools like keyframes-cli can extract keyframe data (X_POSITION, Y_POSITION, start_frame, etc.) from AE files. By processing the exported JSON, you can compute each point’s position and its time‑to‑duration ratio, then generate corresponding CSS transform: translate() rules. More keyframes yield smoother motion but increase CSS size.

Note: Not all AE transition properties are exportable; the export depends on the specific easing used in the composition.

In summary, movement animations are achieved by mapping time to position using the most suitable technique—simple CSS keyframes for straight lines, combined transforms or SVG for curves, and JavaScript libraries for complex paths—while tools exist to bridge design assets into code.