Clojurians Log v2

@wilkerlucio has joined the channel

@noprompt is there a way to create css @keyframes with garden?

found the answer 🙂 garden.stylesheet/at-keyframes

@wilkerlucio this is something that needs to be in the README and i apologize for it not being there.

(require '[garden.def :refer [defrule defkeyframes]])

(defkeyframes pulse
  [:from
   {:opacity 0}]

  [:to
   {:opacity 1}])

(css {:vendors ["webkit"]
      :output-to "foo.css"}

  ;; Include our keyframes
  pulse

  [:h1
   ;; Notice we don't need to quote pulse.
   ^:prefix {:animation [[pulse "2s" :infinite :alternate]]}])

@keyframes pulse {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@-webkit-keyframes pulse {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

h1 {
  -webkit-animation: pulse 2s infinite alternate;
  animation: pulse 2s infinite alternate;
}

thanks, I found it on a changelog, garden is really awesome 🙂

I like the inline version better, I'm using with Fulcro, so I can make localized animations per component, the combo of Fulcro + Garden for CSS is the best way to handle css for react components that I found so far