https://github.com/yet3/scss-timed-keyframes
A sass mixin for easily making animations with specific durations
https://github.com/yet3/scss-timed-keyframes
Last synced: 7 months ago
JSON representation
A sass mixin for easily making animations with specific durations
- Host: GitHub
- URL: https://github.com/yet3/scss-timed-keyframes
- Owner: yet3
- License: mit
- Created: 2024-10-24T20:20:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T20:24:29.000Z (almost 2 years ago)
- Last Synced: 2025-02-07T01:24:32.446Z (over 1 year ago)
- Language: SCSS
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Timed keyframes
A [sass](https://sass-lang.com/) mixin for easily making animations with specific durations.
### Usage
```scss
@include timed_keyframes(
animated-colors,
(red 1.5s),
(blue 1.5s 1.5s),
(red 0.5s),
(cyan 1.5s 1s),
(red 0.5s 2s),
)
using ($step) {
@if $step == red {
background: red;
} @else if $step == blue {
background: blue;
} @else if $step == cyan {
background: cyan;
}
}
```
Result
```css
:root {
--duration-animated-colors: 10000ms;
}
@keyframes animated-colors {
0%,
15% {
background: red;
}
30%,
45% {
background: blue;
}
50% {
background: red;
}
65%,
75% {
background: cyan;
}
80%,
100% {
background: red;
}
}
```
### TODO
- [ ] Add more options
- Options to auto-generate animation class
- Option to customize duration's var prefix or maybe to just specifie the entire name
- [ ] Write tests