diff --git a/src/function.js b/src/function.js index 276ff9f..74ec686 100644 --- a/src/function.js +++ b/src/function.js @@ -563,6 +563,14 @@ const Expose = add_alias({ return calc_with(`var(--${utime.name})`); }, + ts() { + return calc_with(`calc(var(--${utime.name}) / 1000)`); + }, + + TS() { + return calc_with(`calc(var(--${UTime.name}) / 1000)`); + }, + UT() { return calc_with(`var(--${UTime.name})`); }, diff --git a/src/generator/css.js b/src/generator/css.js index 2a56985..1c283bb 100644 --- a/src/generator/css.js +++ b/src/generator/css.js @@ -250,7 +250,8 @@ class Rules { check_uniforms(name) { switch (name) { - case 'ut': case 'UT': case 't': case 'T': this.uniforms.time = true; break; + case 'ut': case 'UT': case 't': case 'T': case 'ts': case 'TS': + this.uniforms.time = true; break; case 'ux': this.uniforms.mousex = true; break; case 'uy': this.uniforms.mousey = true; break; case 'uw': this.uniforms.width = true; break; @@ -794,19 +795,21 @@ class Rules { } if (this.uniforms.time) { + let n = 'animation-name'; + let t = utime.ticks; + let un = utime.name; + let Un = UTime.name; this.styles.container += ` :host,.host { animation:${utime.animation()},${UTime.animation(DELAY + 'ms')}; } `; this.styles.keyframes += ` - @keyframes ${utime['animation-name']} { - from {--${utime.name}:0} - to {--${utime.name}:${Math.trunc(utime.ticks/(1000/60))}} + @keyframes ${utime[n]} { + from {--${un}:0} to {--${un}:${t}} } - @keyframes ${UTime['animation-name']} { - from {--${UTime.name}:0} - to {--${UTime.name}:${utime.ticks}} + @keyframes ${UTime[n]} { + from {--${Un}:0} to {--${Un}:${t}} } `; } diff --git a/src/uniforms.js b/src/uniforms.js index fa58d4a..e9be2e1 100644 --- a/src/uniforms.js +++ b/src/uniforms.js @@ -1,10 +1,11 @@ function create_time_uniform(name) { let ticks = 1000 * 60 * 60 * 24; /* 24 hours in ms */ + let steps = ticks / (1000 / 60); let aname = `${name}-animation`; return { name, ticks, 'animation-name': aname, - animation: (delay='0s') => `${ticks}ms linear ${delay} infinite ${aname}` + animation: (delay='0s') => `${ticks}ms steps(${steps}) ${delay} infinite ${aname}` } }