Sketchbook | 20220917

Some examples of basic CSS animation.

Iteration allows for easy parameterization of the CSS animation properties.

(->>
 (range 0 1.8 0.2)
 (map
  (fn
   [d]
   [:div
    {:style (style {:animation-delay (str d "s")}),
     :class "basic-animation"}]))
 (apply
  conj
  [:figure {:id "iteration-example"} [:figcaption "Iteration"]]))

Inline styles allow for overriding the defaults set by the classes.

(->>
 (range 0 -1.8 -0.05)
 (map
  (fn
   [d]
   [:div
    {:style
     (style
      {:animation-delay (str d "s"), :margin-bottom "1px", :height 3}),
     :class "basic-animation"}]))
 (apply
  conj
  [:figure {:id "inline-example"} [:figcaption "Inline Override"]]))

If you know Clojure and this type of post is difficult or impossible for you to write using your favorite static site generator, consider using fabricate, which makes it simple and straightforward.