Have you ever noticed a font style change in the background text when applying CSS3 animations for opacity and scale transforms? I have some text content on my page, including a "Click me" link that triggers a popup with a CSS3 animation. However, I've observed an unexpected font change during the animation process.
To see the code in action, check out this JSFiddle.
.fade-in-scale{
animation-name: fade-in-scale;
-webkit-animation-name: fade-in-scale;
-moz-animation-name: fade-in-scale;
animation-duration: .5s;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
@keyframes fade-in-scale {
0% {
opacity: 0;
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}
@-webkit-keyframes fade-in-scale {
0% {
opacity: 0;
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
}
}