Here is my code
html
<h1 class="logo-title"><span>DAVE</span></h1>
css
h1.logo-title {background: url(bg.jpg) no-repeat;background-position: 50% 100%;-webkit-background-clip: text;}
I am trying to use my background image zoomin and zoomout animation effect like those websites. here is demo.
http://wowslider.com/jquery-slider-bar-kenburns-demo.html
http://owwwlab.com/toranj/index-2.html
please give me any sollution for my background image. Anybody help me out in this situation. ??
You may get the idea here:
HTML:
<div class="zoom-in strawberry">
</div>
<button onclick="zoomin(100, 2, 500)">Zoom In</button>
CSS:
.strawberry{
background-image: url('http://dreamatico.com/data_images/strawberry/strawberry-6.jpg');
background-repeat: no-repeat;
}
.zoom-in{
display: block;
width: 400px;
height:350px;
background-size: 400px;
}
Script:
function zoomin(interval, sizeChangeEveryInterval, stopResizeWhenSizeReached){
var timeout = setInterval(function(){
var target = $(".zoom-in")
var bgposx = target.css('background-position-x') ? parseInt(target.css('background-position-x')) : 0;
target.css('background-position-x',(bgposx - sizeChangeEveryInterval) + "px");
var bgposy = target.css('background-position-y') ? parseInt(target.css('background-position-y')) : 0;
target.css('background-position-y',(bgposy - sizeChangeEveryInterval) + "px");
var bgsize = !isNaN(parseInt(target.css('background-size'))) ? parseInt(target.css('background-size')) : 100;
target.css('background-size',(bgsize + sizeChangeEveryInterval) + "px");
if(stopResizeWhenSizeReached < bgsize) clearInterval(timeout)
}, interval)
}
Here's my Fiddle: http://jsfiddle.net/ThisIsMarkSantiago/xm1zp09g/
easiest way to do it is by just putting an img tag behind your content and then transform: scale(110%,110%);. Animate it using css:
div.container
{
position: relative;
}
img.background
{
position: absolute;
z-index: -1;
left: 0px;
// .. etc etc
transform: scale(100%, 100%);
transform-origin: 50% 50%; // wherever you want the 'midpoint' to be at.
transition: transform 5s linear;
}
img.background.active
{
transform: scale(110%, 110%);
}
easy does it.
you could of course do this with just background-image but then you will have a tougher time switching from image to image.
You can solve this issue also using pure CSS3 animations. Though it might not be supported on every platform
Here is a working example (quickly hacked together & tested in chrome):
html, body {
min-width: 400px;
min-height: 300px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.container {
position: relative;
height: 100%;
width: 100%;
background: #efefef;
overflow: hidden;
}
.image {
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-animation-name: zoom;
animation-name: zoom;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.image-1{
background-image: url(http://www.chip.de/ii/917741674_393fa282fa.jpeg);
}
.image-2{
-webkit-animation-delay: 5s;
animation-delay: 5s;
background-image: url(http://www.chip.de/ii/917741714_fe3259c85e.jpeg);
}
#keyframes zoom {
0% {transform: scale(1,1); z-index: 2;}
49% {transform: scale(2,2);}
50% {opacity: 0}
}
#-webkit-keyframes zoom {
0% {-webkit-transform: scale(1,1); z-index: 2;}
49% {-webkit-transform: scale(2,2);}
50% {opacity: 0}
}
<div class="container">
<div class="image image-1" style=""></div>
<div class="image image-2" style=""></div>
</div>
Related
spining icon not spinning in the iOS version > 15.3 or 16.1 but it is working fine in the lower < 15 iOS version iphone and ipad and Android, browser.
Please find the below css code for reference. i have tried with webkit for safari and also tried with transform: rotate(-360deg). but spinner is not spinning/rotating in the iOS device alone. please help me for fixing this issue.
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/* spinner Wrapper */
.Wrapperspinner{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
line-height: 30px;
margin-left: 0;
margin-top: 0;
text-align: center;
color: #fff;
padding-top: 7px;
background-color: rgba(250, 250, 250, 0.8);
opacity: 0.8;
display: none;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 110px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%)
}
/* Spinning circle (inner circle) */
.loading .maskedCircle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #ff6969;
}
/* Spinning circle mask */
.loading .mask {
width: 25px;
height: 25px;
overflow: hidden;
margin: -3px;
}
/*waiting text*/
.loading .spinnerWaitingText {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
/* Spinner */
.loading .spinner {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-radius: 50%;
border: 3px solid #12779a;
}
div.tc-screenMask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000;
opacity: 0.3;
display: none;
}
.SpinnerStep1,
.SpinnerStep2,
.SpinnerStep3{
opacity: 0;
text-align: center;
position: absolute;
width: 100%;
}
.SpinnerContainer{
position: fixed;
top: calc(50% + 90px);
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
min-width: 300px;
visibility: hidden;
}
.SpinnerStep1 {
animation-name: fadeInOut1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep2 {
animation-name: fadeInOut2;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut2;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep3 {
animation-name: fadeInOut3;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut3;
-webkit-animation-duration: 9s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
95% {opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
50% { opacity: 0 }
51% { opacity : 1}
95% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
66% { opacity: 0 }
67% { opacity: 1 }
100% { opacity: 1 }
}
#-webkit-keyframes fadeInOut1 {
0% { -webkit-opacity: 0 }
1% { -webkit-opacity: 1 }
95% {-webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut2 {
0% { -webkit-opacity: 0 }
50% { -webkit-opacity: 0 }
51% { -webkit-opacity : 1}
95% { -webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut3 {
0% { -webkit-opacity: 0 }
66% { -webkit-opacity: 0 }
67% { -webkit-opacity: 1 }
100% { -webkit-opacity: 1 }
}
.angSpinner.Wrapperspinner {
background-color: #fff;
opacity: 0.9;
display: block;
visibility: hidden;
}
.angSpinner .loading {
width: 148px;
height: 148px;
}
.angSpinner .loading .spinner {
border: none;
width: 148px;
height: 148px;
animation-name: spin;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.angSpinner .loading .maskedCircle {
border: 4px solid #005900;
width: 140px;
height: 140px;
margin: 0;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.angSpinner .loading .mask {
width: 148px;
height: 35px;
margin: 0;
}
<div id="Wrapper" class="Wrapperspinner"
aria-label="Loading page now">
<div class="loading">
<!-- We make this div spin -->
<div class="spinner">
<!-- Mask of the quarter of circle -->
<div class="mask">
<!-- Inner masked circle -->
<div class="maskedCircle"></div>
</div>
</div>
<div class="loginSpinnerContainer" aria-hidden="true" tabindex="-1">
<div class="boi_label SpinnerStep1">
Contacting to server...
</div>
<div class="boi_label SpinnerStep2">
Authenticating your application...
</div>
<div class="boi_label SpinnerStep3">
Running security checks...
</div>
</div>
<div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
SLoader.setup({
id: 'WRAPPER',
showMask: 'WRAPPER.CREATE_MASK',
delay: '5'
});
$(document).ready(function() {
SLoader.triggerHide();
$('.main-form').attr('aria-hidden', 'false');
});
Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
Hi.addHook('postProcessResponse', SLoader.triggerHide);
function showSpinnerOnSubmit(){
$('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
$('.main-form').attr('aria-hidden', 'true');
SLoader.triggerShow();
}
function showLoginSpinner(){
$('.loginSpinnerContainer').css('visibility', 'visible');
$('.spinnerWaitingText').hide();
$('#WRAPPER$').addClass('customSpinner');
}
function showSpinnerForAjaxButton() {
if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
SLoader.triggerShowAjax();
}
}
//]]>
</script>
General info
I'm working on a Bingo game. Currently I'm trying to create a CSS rolling ball animation. The idea is to simulate a ball dropping from the wheel and making it roll from right to left.
The problem
The animation is working fine. But the "drop in" position is relative to the div. As a consequence of this, this position keeps moving right 75 pixels on each new ball dropping in.
Solutions I've tried
- Give the balls an absolute position. This solves the issue, but each ball will cover the previous balls due to the keyframe ending at left: 0%. This is not desirable.
- Lookup Javascript solutions to see if I can somehow change the keyframe to end with +75px on the previous ball. Unfortunately it seems impossible to manipulate animations this way, or I was unable to find a way to do it.
So now I'm hoping someone is able to help me find a solution to this problem.
Edit: I didn't tag jQuery because it's not used here, but solutions using jQuery are perfectly fine.
MCVE
const timer = setInterval(rollBall, 2000);
var ballNumber = 1;
function rollBall(){
if(document.getElementById('ball-'+(ballNumber-1))){
document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
}
let html = '<div id="ball-'+ballNumber+'" class="ball ball-animation">';
html += '<p class="ball-number">';
html += ballNumber;
html += '</p></div>';
document.getElementById('balls').innerHTML += html;
ballNumber++;
if(ballNumber > 10) {
clearInterval(timer);
document.getElementById('ball-'+(ballNumber-1)).classList.remove('ball-animation');
}
}
.ball {
display: block;
position: relative;
width: 75px;
height: 75px;
background: red;
border-radius: 50%;
background: -webkit-radial-gradient(25px 25px, circle, red, #000);
background: -moz-radial-gradient(25px 25px, circle, red, #000);
background: radial-gradient(25px 25px, circle, red, #000);
/*position: absolute;*/
float: left;
}
.ball-number {
top: -34px;
left: 25px;
font-size: 45px;
color: #fff;
position: absolute;
}
.ball-animation {
-webkit-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
-moz-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
-ms-animation: spin 1750ms linear infinite, moveRightToLeft 2s linear infinite;
animation: spin 1750ms linear infinite, moveRightToLeft 2s linear;
-webkit-transition: all 1.75s ease;
transition: all 1.75s ease;
}
#keyframes spin {
from { transform: rotate(360deg); }
to { transform: rotate(0deg); }
}
#keyframes moveRightToLeft {
0% { top: -50px; left: 200px; }
10% { top: -40px; left: 180px; }
20% { top: -25px; left: 150px; }
30% { top: 0px; left: 100px; }
100% { left: 0%; }
}
<div id="balls"></div>
This is a CSS only solution, using an intermediate div, zone to handle the ball movement .
Since this elements have varying sizes, you can set the keyframes on them to work in percentages, and adjust for a different ending point, while keeping the same origin point.
.container {
width: 600px;
height: 350px;
border: solid 1px red;
position: relative;
}
.zone {
position: absolute;
top: 0px;
right: 0px;
bottom: 40px;
left: 40px;
border: solid 1px green;
animation: move 3s linear infinite;
}
.zone:nth-child(2) {
left: calc(40px * 2);
}
.zone:nth-child(3) {
left: calc(40px * 3);
}
.zone:nth-child(4) {
left: calc(40px * 4);
}
.ball {
width: 40px;
height: 40px;
border-radius: 100%;
background-color: blue;
right: 0px;
position: absolute;
}
#keyframes move {
from {transform: translate(0px, 0px);}
50% {transform: translate(-100px, 100%);}
to {transform: translate(-100%, 100%);}
}
<div class="container">
<div class="zone">
<div class="ball">1</div>
</div>
<div class="zone">
<div class="ball">2</div>
</div>
<div class="zone">
<div class="ball">3</div>
</div>
<div class="zone">
<div class="ball">4</div>
</div>
</div>
So I'm trying to create a diagonal scroll in CSS3, but I'm having no luck.
The original script is this: https://codepen.io/275845/pen/LoYBjg
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 15s linear infinite;
}
#keyframes moveSlideshow {
100% {
transform: translateX(-66.6666%);
}
}
</style>
<div class="tech-slideshow">
<div class="mover-1"></div>
<div class="mover-2"></div>
</div>
Here's what I've tried so far, with no success: https://codepen.io/275845/pen/gJOjXY
<style>
.tech-slideshow {
height: 600px;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
height: 100px;
width: 2526px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
top: 0;
left: 0;
height: 100%;
transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
animation: moveSlideshow 2s linear infinite;
}
.tech-slideshow .mover-2 {
opacity: 0;
transition: opacity 0.5s ease-out;
background-position: 0 -200px;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px)
}
100% {
transform: translatex(100px) translatey(100px);
}
}
</style>
And here's the result that I'm trying to achieve: https://streamable.com/ltsba
As you can see, I'm trying to make a diagonal slide scrolling in css3, but of course, if anyone could point me out another solution weather it's vanilla javascript, or even jQuery, I'm opened for new suggestions.
You're pretty close, just a few issues.
You don't need 2 "mover", one is enough.
Make it big! And background repeat!
Then you move the size of that background image.
.tech-slideshow > div {
height: 3000px; // BIG
width: 3000px;
background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
position: absolute;
bottom: 0;. // position
right: 0;
animation: moveSlideshow 5s linear infinite;
}
#keyframes moveSlideshow {
0% {
transform: translatex(0px) translatey(0px);
}
100% {
transform: translatex(255px) translatey(255px); // move size of image
}
}
I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. e.g in my sample code below I want to first load red progress bar then load the green progress bar. How can I do that?
Please check the code in this jsfiddle.
html:
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
css:
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
.progress-bar-outer div {
animation:loadbar 3s;
-webkit-animation:loadbar 3s;
}
#keyframes loadbar {
0% {width: 0%;left:0;right:0}
}
I would transition transform instead for better performance. Use translateX(-100%) with opacity: 0 to move them to their default, hidden position, then animate to translateX(0); opacity: 1; to put them in place. And just add an animation-delay to the green bar that matches the animation-duration
I made the bars semi-opaque to show when the animations fire.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
display: flex;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
}
.progress-bar-outer div {
transform: translateX(-100%);
animation: loadbar 3s forwards;
-webkit-animation: loadbar 3s forwards;
opacity: 0;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
0% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Modified Michael Coker's answer to better reflect my interpretation of what you're asking for.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
position: relative;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: red;
z-index: 1;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
z-index: 2;
}
.progress-bar-outer div {
position: absolute;
top: 0; bottom: 0;
transform: translateX(-100%);
animation: loadbar 3s linear;
-webkit-animation: loadbar 3s linear;
opacity: 1;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
100% {
transform: translateX(0);
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Apply Transition to inner classes, add delays to secondary inner and use opacity to hide the element before transition begins.
.progress-bar-inner {
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
.progress-bar-inner2 {
-webkit-animation: loadbar 2s ease 2s forwards;
animation: loadbar 2s ease 2s forwards
animation-delay: 2s;
-webkit-animation-delay: 2s;
opacity:0;
}
#keyframes loadbar {
0% { width: 0%;left:0;right:0}
1% { opacity: 1}
100% { opacity: 1}
}
See working example:
https://jsfiddle.net/dfkLexuv/10/
I use a css animation to represent the sun cycle for a day (from 6AM to 6PM).
Unfortunatly, I want also to be able to set the current percentage depending on the time of the day (for example, if the current time is 12AM, I want to put the sun at 50% of the animation.
Here is my jsfiddle :
http://jsfiddle.net/vyhjt6mu/3/
and Here is my code :
/* Chrome, Safari, Opera */
#-webkit-keyframes sunAnimation {
0% {
left: -100px;
top: 30%;
}
25% {
left: calc(25% - 25px);
top: 20%;
}
50% {
left: calc(50% - 40px);
top: 10%;
}
75% {
left: calc(75% + 25px);
top: 20%;
}
100% {
left: calc(100% + 100px);
top: 30%;
}
}
#keyframes sunAnimation {
0% {
left: -100px;
top: 30%;
}
25% {
left: calc(25% - 25px);
top: 20%;
}
50% {
left: calc(50% - 40px);
top: 10%;
}
75% {
left: calc(75% + 25px);
top: 20%;
}
100% {
left: calc(100% + 100px);
top: 30%;
}
}
.sun {
width: 100px;
height: 100px;
position: absolute;
animation-name: sunAnimation;
animation-duration: 60s;
animation-timing-function: linear;
-webkit-animation-name: sunAnimation;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 60s;
/* Chrome, Safari, Opera */
-webkit-animation-timing-function: linear;
/* Chrome, Safari, Opera */
}
How can I simply set the current percentage of a css3 animation ? If it's very complex to do it, does a library exist for that ?
Thanks for your help.
It's not a duplicate because the needs are different.
You can specify a negative animation-delay property.
Example: http://jsfiddle.net/vyhjt6mu/4/
In that example I've set animation-delay: -30s so the animation will start from the middle point
For this task you could set 24 different classes in CSS (one for each hour) like so
.h00 {
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.h01 {
animation-delay: -2.5s;
-webkit-animation-delay: -2.5s;
}
.h02 {
animation-delay: -5s;
-webkit-animation-delay: -5s;
}
...
.h22 {
animation-delay: -55s;
-webkit-animation-delay: -55s;
}
.h23 {
animation-delay: -57.5s;
-webkit-animation-delay: -57.5s;
}
where the difference of delay between each hour is 2.5 seconds (60s/24); then, via JS, get the current hour via getHours() method and apply the right class name to your element
To answer your actual question:
Yes, you can use a combination of CSS-vars and JS for this.
$(function () {
$(window).mousemove(function (e) {
var t = (-1/$(window).width()*e.pageX);
document.documentElement.style.setProperty('--delay', t+'s');
});
});
:root {
--delay: 0;
}
.box {
width: 20px;
height: 20px;
background-color: #ff6600;
animation: move 1s;
animation-play-state: paused;
animation-delay: var(--delay);
}
#keyframes move {
100% {
transform: translate(200px, 100px) scale(2) rotate(180deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
</div>