I have a question. I am new with CSS animations and can't find out why this isn't working in safari. I am trying to get my a grow animation on an img and it is working in chrome and all other browsers but it isn't working in Safari. Do I forget a line of css or something?

img {
    animation: scale-bubble;
    animation-duration: 1.2s;
    animation-delay: 1.5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    transform: scale(0%);
    animation-play-state: running;
    animation-iteration-count: 1;
    
    -webkit-animation: scale-bubble;
    -webkit-animation-duration: 1.2s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -webkit-transform: scale(0%);
    -webkit-animation-play-state: running;
    -webkit-animation-iteration-count: 1;
}

@keyframes scale-bubble {
    0% {
        transform: scale(0%);
        -webkit-transform: scale(0%);
    }
    100% {
        transform: scale(100%);
        -webkit-transform: scale(100%);
    }
}
@-webkit-keyframes scale-bubble {
    0% {
        transform: scale(0%);
        -webkit-transform: scale(0%);
    }
    100% {
        transform: scale(100%);
        -webkit-transform: scale(100%);
    }
}

CodePudding user response：

try this :

-webkit-transform:scale(0.9, 0.9);

CodePudding user response：

transform: scale(...) in CSS expects a number or a pair of numbers not %.

See MDN

sx A <number> representing the abscissa of the scaling vector.

sy A <number> representing the ordinate of the scaling vector. If not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio.

where this reference defines what is meant by a number https://developer.mozilla.org/en-US/docs/Web/CSS/number

So use scale(0) and scale(1) rather than 0% and 100%.

Note: we don't know the full context of your scaling, but you may need to wait for the image to load depending on your use case.