More properties

src/commonMain/kotlin/nl/astraeus/css/style/Style.kt

@@ -2,6 +2,7 @@ package nl.astraeus.css.style
 
 import nl.astraeus.css.properties.*
 import nl.astraeus.logging.log
+import kotlin.time.Duration
 
 typealias Css = Style.() -> Unit
 
@@ -364,6 +365,34 @@ open class Style(
     fun all(all: All) {                             properties["all"] = toProp(all)                }
     fun alignSelf(alignSelf: AlignSelf) {           properties["align-self"] = toProp(alignSelf)   }
     fun animation(text: String) {                   properties["animation"] = listOf(CssProperty(text)) }
+    fun animationDelay(delay: DelayDuration) {      properties["animation-delay"] = listOf(delay) }
+    fun animationDirection(direction: AnimationDirection) { properties["animation-direction"] = listOf(direction) }
+    fun animationDuration(duration: DelayDuration) { properties["animation-duration"] = listOf(duration) }
+    fun animationFillMode(fillMode: AnimationFillMode) { properties["animation-fill-mode"] = listOf(fillMode) }
+    fun animationIterationMode(vararg iterationMode: Count) { properties["animation-iteration-mode"] = iterationMode.toList() }
+    fun animationFrame(frame: AnimationFrame) {     properties["animation-frame"] = listOf(frame) }
+    fun animationName(vararg name: String) {        properties["animation-name"] = name.toList().map { an -> CssProperty(an) } }
+    fun animationPlayState(vararg state : AnimationPlayState) {
+        properties["animation-play-state"] = state.toList()
+    }
+    fun animationTimingFunction(vararg timingFunction: AnimationTimingFunction) {
+        properties["animation-timing-function"] = timingFunction.toList()
+    }
+
+
+    /*
+
+        "animation-delay" to animationDelay,
+        "animation-direction" to animationDirection,
+        "animation-duration" to animationDuration,
+        "animation-fill-mode" to animationFillMode,
+        "animation-iteration-count" to animationIterationCount,
+        "animation-frame" to animationFrame,
+        "animation-name" to animationName,
+        "animation-play-state" to animationPlayState,
+        "animation-timing-function" to animationTimingFunction,
+     */
+    fun color(color: Color) {                       properties["color"] = listOf(color)                    }
     fun backgroundColor(color: Color) {             properties["background-color"] = listOf(color)                    }
     fun borderRadius(radius: Measurement) {         properties["border-radius"] = listOf(radius)                      }
     fun borderRadius(

src/jsMain/kotlin/nl/astraeus/css/Test.kt

@@ -1,6 +1,7 @@
 package nl.astraeus.css
 
 import nl.astraeus.css.properties.*
+import nl.astraeus.css.properties.Color.Companion.hex
 import nl.astraeus.css.properties.Measurement.Companion.em
 import nl.astraeus.css.properties.Measurement.Companion.px
 import nl.astraeus.css.style.Style
@@ -32,14 +33,14 @@ private fun generateCss(
         select("body") {
 //            fontFamily = base.mainFont
 //            color = base.mainColor
-//            backgroundColor = base.mainBackgroundColor
+              backgroundColor(base.mainBackgroundColor)
 //            alignContent = AlignContent.initial()
         }
 
         select(".test") {
 //            top = px(10)
 //            left = em(5)
-//            backgroundColor = Color.rgba(255, 255, 255, 0.75)
+            backgroundColor(Color.rgba(255, 255, 255, 0.75))
 //
 //            select("> a") {
 //                color = Color.hsl(200, 50, 50)
@@ -48,11 +49,12 @@ private fun generateCss(
 
         select("nav") {
             select("ul") {
-//                color = Color.hsl(0, 100, 25)
-//                backgroundColor = base.mainBackgroundColor
+                color(Color.hsl(0, 100, 25))
+                backgroundColor(base.mainBackgroundColor)
             }
             select("li") {
                 sizePX(25, 25, 200, 200)
+                animationPlayState(AnimationPlayState.paused(), AnimationPlayState.running())
 
                 select("a") {
 //                    width = px(725)
@@ -79,6 +81,8 @@ fun main() {
 
     val sd = style {
         select("#pipo") {
+            backgroundColor(hex("ffeedd"))
+            fontFamily("Arial, Courier")
 //            backgroundColor = Color.hex("eeeeee")
 //            fontFamily = text("Arial, Courier")
 //            animationDelay = listOf(DelayDuration.initial())

src/jvmMain/kotlin/nl/astraeus/css/Test.kt

@@ -147,6 +147,7 @@ fun main() {
                 select("border-2") {
 //                    borderRadius = BorderRadius(4, 5, 6, 7)
                     apply(border2)
+                    animationPlayState(AnimationPlayState.paused(), AnimationPlayState.running())
 
 //                    display = Display.none()
 //                    borderBottomWidth = BorderWidth.perc(13)