CODEWITHSUNDEEP
javascriptcssanimationtransform
Tommie Tong
Tommie Tong

Reputation: 3

how can I do the transform first then animation in js?

I want the item1 can be larger and rotate first, and then keep spinning, however the result shows that it only excutes the animation but transform. Thank you for your help.

In css

#item1 {
    transition: transform 3s ease-in-out;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

@keyframes spin{
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}

In js

button.onclick = function () {
  item1.style.transform = "scale(1.2) rotate(360deg)";
  setTimeout(function () {
    item1.style.animationPlayState = "running";
  }, 3000);
};

Upvotes: 0

Views: 88

Answers (2)

AmirABD
AmirABD

Reputation: 297

It seems there is no way to run transform "rotate and scale" in single animation keyframes. You have to create two DIVs. One for rotate and one for scale. You can then add JavaScript "setTimeout" for some delay.

function stopAnime(){
document.querySelectorAll(".animeCLS").forEach(element => {
            element.style.animation="none"; // Stop all animations.
        });
}
function startAnime(){
document.querySelectorAll(".parentRotate").forEach(element => { 
            element.style.animation="rot 2s infinite linear"; // Start rotating animations.
        });
document.querySelectorAll(".childScale").forEach(element => {
            element.style.animation="scl 2s infinite linear"; // Start scaling animations.
        });
}
.parentRotate{animation:rot 2s infinite linear;width:200px;height:200px;background-color:black;border-radius:50%;}
.childScale{animation:scl 2s infinite linear;width:200px;height:200px;background-color:yellow;border-radius:50%;}
@keyframes rot{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
@keyframes scl{
0%{transform: scale(0.8);}
50%{transform: scale(1.2);}
100%{transform: scale(0.8);}
}
<div class="parentRotate animeCLS" style="">
<div align="center" class="childScale animeCLS" style="">text</div>
</div>

<button onclick="startAnime();">startAnime</button>
<button onclick="stopAnime();">stopAnime</button>

Upvotes: 0

Guerric P
Guerric P

Reputation: 31835

You can use a static class and an animate class that also has the scale(1.2) in the transform property like this:

const button = document.getElementById('id');
const item1 = document.getElementsByTagName('div')[0];

button.onclick = function () {
  item1.className="static";
  setTimeout(function () {
    item1.className="animate";
  }, 3000);
};
.static {
  transform: scale(1.2);
}

.animate {
    transition: transform 3s ease-in-out;
    animation: spin 10s linear infinite;
}

@keyframes spin{
    0%{
        transform: scale(1.2) rotate(0deg);
    }

    100%{
        transform: scale(1.2) rotate(360deg);
    }
}
<button id="id">
Animate
</button>
<div>
Barrel roll
</div>

Upvotes: 0

Related Questions