whisker_css/prop/
animation.rs

1//! Animation longhand properties.
2
3use crate::css::Css;
4use crate::data_type::Time;
5use crate::data_type_ext::EasingFunction;
6use crate::keyword::{
7    AnimationDirection, AnimationFillMode, AnimationIterationCount, AnimationPlayState,
8};
9
10impl Css {
11    /// Sets `animation-name` — references a `@keyframes` block.
12    /// <https://lynxjs.org/api/css/properties/animation-name>
13    pub fn animation_name(self, name: impl Into<String>) -> Self {
14        // Names are CSS identifiers, written bare.
15        self.push_raw("animation-name", name)
16    }
17
18    /// Sets `animation-duration`.
19    /// <https://lynxjs.org/api/css/properties/animation-duration>
20    pub fn animation_duration(self, v: Time) -> Self {
21        self.push("animation-duration", v)
22    }
23
24    /// Sets `animation-timing-function`.
25    /// <https://lynxjs.org/api/css/properties/animation-timing-function>
26    pub fn animation_timing_function(self, v: EasingFunction) -> Self {
27        self.push("animation-timing-function", v)
28    }
29
30    /// Sets `animation-delay`.
31    /// <https://lynxjs.org/api/css/properties/animation-delay>
32    pub fn animation_delay(self, v: Time) -> Self {
33        self.push("animation-delay", v)
34    }
35
36    /// Sets `animation-iteration-count`.
37    /// <https://lynxjs.org/api/css/properties/animation-iteration-count>
38    pub fn animation_iteration_count(self, v: AnimationIterationCount) -> Self {
39        self.push("animation-iteration-count", v)
40    }
41
42    /// Sets `animation-direction`.
43    /// <https://lynxjs.org/api/css/properties/animation-direction>
44    pub fn animation_direction(self, v: AnimationDirection) -> Self {
45        self.push("animation-direction", v)
46    }
47
48    /// Sets `animation-fill-mode`.
49    /// <https://lynxjs.org/api/css/properties/animation-fill-mode>
50    pub fn animation_fill_mode(self, v: AnimationFillMode) -> Self {
51        self.push("animation-fill-mode", v)
52    }
53
54    /// Sets `animation-play-state`.
55    /// <https://lynxjs.org/api/css/properties/animation-play-state>
56    pub fn animation_play_state(self, v: AnimationPlayState) -> Self {
57        self.push("animation-play-state", v)
58    }
59}
60
61#[cfg(test)]
62mod tests {
63    use crate::data_type_ext::EasingFunction;
64    use crate::ext::*;
65    use crate::keyword::*;
66    use crate::Css;
67
68    #[test]
69    fn animation_full_set() {
70        let s = Css::new()
71            .animation_name("spin")
72            .animation_duration(2.s())
73            .animation_timing_function(EasingFunction::Linear)
74            .animation_delay(100.ms())
75            .animation_iteration_count(AnimationIterationCount::Infinite)
76            .animation_direction(AnimationDirection::Alternate)
77            .animation_fill_mode(AnimationFillMode::Forwards)
78            .animation_play_state(AnimationPlayState::Running);
79        assert_eq!(
80            s.to_string(),
81            "animation-name: spin; animation-duration: 2s; animation-timing-function: linear; animation-delay: 100ms; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-play-state: running;"
82        );
83    }
84
85    #[test]
86    fn iteration_count_explicit() {
87        let s = Css::new().animation_iteration_count(AnimationIterationCount::Count(3.0));
88        assert_eq!(s.to_string(), "animation-iteration-count: 3;");
89    }
90}
whisker_css/prop/animation.rs

whisker_css/prop/
animation.rs
