[SOLVED] CSS Animation: Adding multiple properties in a keyframe animation

alejandrowunderlich · 2020-08-08T20:16:11.653Z

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.

alejandrowunderlich · 2020-08-08T21:18:31.931Z

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 · 2020-10-17T20:16:16.623Z

This topic was automatically closed after 70 days. New replies are no longer allowed.