unable to get CSS transform property to animate in Safari

[Nilzone]

Here is the fiddle: http://jsfiddle.net/sg0va9y1/2/

My main problem is this one:

.input-date:focus ~ .label-placeholder {
    transform:translate(-50%, 65%);
    -webkit-transform:translate(-50%, 65%);
    -moz-transform:translate(-50%, 65%);
    transition:transform 0.4s;
    -webkit-transition:transform 0.4s;
    -moz-transition: transform 0.4s;
}

This works in Chrome just fine, but not in safari.

Any help will be much appreciated.

[Paulie_D]

Which version of Safari?

[Nilzone]

Version 8.0.7 (10600.7.12)

[Paulie_D]

Ah…can’t help you there as I’m on Windows.

One think though…you might want to have the unprefixed versions of the properies last…it’s considered best practice.

[Nilzone]

OK, I solved it:

It’s really silly – Instead of writing it like this (shorthand)

-webkit-transition:transform 0.4s;

You write it like so:

-webkit-transition-property: transform;
-webkit-transition-duration: 0.4s;

[Author]

Posts