but if i use it for the Addon "Button" the Button dissapears after the animation has finished.
Hi @BOFHJunior .
This is not related to an addon, but depends on the type of animation. My example works with animation effects which have 100% key containing opacity
. These are all types of Fade effects.
But if, for example, ZoomIn effect is used, this will not work by default, since ZoomIn animation does not have a 100% key .
This is what I mean. This is a ZoomIn animation from the box.
@-webkit-keyframes zoomIn {
from {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
50% {
opacity:1;
}
}
@keyframes zoomIn {
from {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
50% {
opacity:1;
}
}
As you can see there is no 100% key. Only 50% key.
To solve the problem, you need to copy all this animation, add 100% key to it and place it after the code for your addon.
Something like this
/*Code for addon*/
#sppb-addon-xxxxxxxxxxxxx {
opacity: 0;
}
/*Corrected animation*/
@-webkit-keyframes zoomIn {
from {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
@keyframes zoomIn {
from {
opacity:0;
-webkit-transform:scale3d(.3,.3,.3);
transform:scale3d(.3,.3,.3);
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
Hi @Rashida. It would be great if you shared this topic to the developers.
This is an old problem that does not allow the use of animation on the first screen (in Firefox) without additional skills.