Forum Academy Marketplace Showcase Pricing Features

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

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

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