Animating with a single property, say, transition:scale() works great. But adding a second property doesn’t work:
@keyframes animate {
0% {
transform: scale(.8);
opacity:0.5;}
100% {
transform: scale(1.5);
opacity:0;}
}
Has anyone been able to make this work? I’m not using plugins for this.
Scratch that. It definitely works. There was some issue with the way I was writing things apparently. This worked perfectly:
@keyframes animation {
0% { transform:scale(0);
opacity:0; }
25% { transform:scale(0);
opacity:0; }
26% { transform:scale(0);
opacity:1; }
60% { transform:scale(30);
opacity:0; }
61% { transform:scale(0);
opacity:0; }
100% { transform:scale(0);
opacity:0; }
}
EDIT: turns out there needs to be a space between the semi colon and the curly bracket:
opacity:0; } WORKS
opacity:0;} DOESNT
system
Closed
3
This topic was automatically closed after 70 days. New replies are no longer allowed.