CSS 3 Animation "Transform: Scale" on Column Element Doesn't Work on Chrome

CSS transform animation doesn't work in Chrome

You missed the fact that transfrom:scale(); only takes simple integers (not measurements of any kind.). I don't know why Firefox CSS engine accepts that. But to make the code legal change the values.

@keyframes appear {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

The scaleX(1) means the actual size of the div as specified by its code. Any other measure there means the relative scale (and not any absolute measure).

CSS animation transform: scale not working in Safari and possibly other browsers

Add the below code and try.

.animate-log-in {
    -webkit-animation: scaleIn;
    -webkit-animation-duration: 0.5s;
    animation: scaleIn;
    animation-duration: 0.5s;
}
@-webkit-keyframes scaleIn {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

CSS transition doesn't work properly in Chrome

You are almost there my dear friend. Checked this pen on my veriosn of Chrome, works like a charm.

However, I suggest you to deep dive into Vendor specific CSS properties when working on CSS Transitions and Transformations.

Here are some links which will definitely work for you:

Cross browser Transitions : https://css-tricks.com/almanac/properties/t/transition/

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

Cross browser Transformations: https://css-tricks.com/almanac/properties/t/transform/

.element {
      -webkit-transform: value;
      -moz-transform:    value;
      -ms-transform:     value;
      -o-transform:      value;
      transform:         value;
    }

Bug with transform: scale and overflow: hidden in Chrome

It's a known bug in Webkit-based browsers - see #62363. You can add a border:1px solid transparent; to your .wrap class to workaround the problem.

For the updated requirement, adding a transition to an element with a border-radius, that's another known Chomre/Webkit bug #157218. Sorry but no known general workaround still, although one comment on that bug says that using the chrome://flags and using the --ignore-gpu-blacklist flag fixes it in Chrome 29 (which just hit the Chrome dev channel today).

---

Related Topics