CSS3 Transforms and Transitions (Webkit)

CSS3 transforms and transitions (Webkit)

Add the vendor prefix in the transitions:

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ 
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

Update (05/06/2014)

To answer some comments, the reason for omitting -ms-transition, is that it has never existed.

Check:

Can I Use? Transitions,

Can I Use? Transforms,

MDN transitions,

MDN transforms

transition on transform property in short code

just got my answer and working well also

.line-all {  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);  transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.animated .line-all {  -ms-transform: translate(0px, 3px) rotate(-45deg);  -webkit-transform: translate(0px, 3px) rotate(-45deg);  transform: translate(0px, 3px) rotate(-45deg);}

IE10/11 uses transition:-webkit-transform?

I just did some more research on this, and it's looking more like a Chrome bug than something about IE.

Here's what the spec says about unrecognized and non-animatable properties in transition-property:

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’. In other words, unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.

The spec does not seem to account for cases when none of the properties specified are supported or animatable, not even in the sections following the transition propdefs. It looks like IE is treating the declaration as valid, albeit with no supported properties to be transitioned, thereby overriding the previous declaration, and effectively making the declaration equivalent to transition-property: none (i.e. the result is similar, but as you have observed the value does not actually compute to none).

Firefox appears to behave the same way that IE does, treating the declaration as equivalent to transition-property: none.

Furthermore, if you put the unprefixed and prefixed transform property names in the same declaration, IE and Firefox will animate the transform just fine (order doesn't matter):

transition: -webkit-transform 1s, transform 1s;

However, if you place any other properties that you would expect to work together with the unrecognized property that causes Chrome to drop the declaration... it still drops that declaration. Yes, where IE and Firefox apply the transition correctly in the above declaration, Chrome ignores it entirely.

It seems to only have this problem with unknown property names, though. For example, if you specify a property that is supported but not animatable, such as background-image:

transition: -webkit-transform 1s, background-image 1s;

Chrome is able to animate the transform just fine.

With all that said, I'm still not entirely sure if the spec is ambiguous, or the behavior shown in IE and Firefox is in fact correct. Sounds like it could use a bit of clarification either way, so I've gone ahead and emailed the CSSWG about this.

CSS transform transition layout flash in WebKit (possibly caused by layout caching?)

This was apparently a bug in the vendor-prefixed implementation of CSS transitions where it pre-computes the target and does not update it after a reflow. It's no longer resent in the un-prefixed version in newer versions of WebKit.

Prevent flicker on webkit-transition of webkit-transform

The solution is mentioned here: iPhone WebKit CSS animations cause flicker.

For your element, you need to set

-webkit-backface-visibility: hidden;

webkit transform blocking link

After combing through the webkit Bugzilla, I found someone who had the same issue and found a workaround.

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

Becomes:

.face.back {
    background-color: #125672;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg) translateZ(1px);
}

The addition of the translateZ to the transform makes the left side of the element clickable.

Here is a link to the bug: https://bugs.webkit.org/show_bug.cgi?id=54371

CSS3 Transition + Transform not working in Safari, but working in Chrome

Vendor prefix has to be at property not at value, so:

-o-transform: scale(1,1);

Browser-specific prefixes with a CSS transition on transform

UPDATE NOTICE Unfortunately it turns out Safari at the time of this post does not follow the standard outlined in the W3 Specification below, and including both a webkit prefixed property and a prefix-less property after transition will cause it to break and not be animated at all. I am still exploring this issue for a good general solution but it looks like until Safari fixes this, there may not be one that works everywhere, and for all future properties, without adjusting your CSS rules per browser dynamically with JavaScript.

If you add an unrecognized or invalid property to a list of transition properties, the valid properties in the list will still be added (except on Safari, see notice above).

According to section 2.1 of the w3 Specification for CSS Transitions:

If one of the identifiers listed is not a recognized property name or is not an animatable property, the implementation must still start transitions on the animatable properties in the list using the duration, delay, and timing function at their respective indices in the lists for ‘transition-duration’, ‘transition-delay’, and ‘transition-timing-function’.

W3 Specification for CSS Transitions

If you take the following style, the width property will still be animated despite being preceded by an invalid and unrecognized property.

transition: unrecognizedProperty 2s, width 2s;

If you follow a transition rule with another transition rule (with the same prefixing or lack thereof), the first rule will be overwritten and no longer applied even if the second rule only has invalid properties listed on the right hand side.

If you try the following style the width will not be animated because the first rule will be overwritten by the second rule, which effectively does nothing since "unrecognizedProperty" is not recognized.

transition: width 2s;
transition: unrecognizedProperty 2s;

Based on this I believe your first approach is correct.

-webkit-transition: -webkit-transform 300ms;
        transition: -webkit-transform 300ms, transform 300ms;

The first rule will only be applied if -webkit-transition is recognized, in which case since transform came out after transition it will definitely have to be prefixed and we can omit the unprefixed transform property (although I don't think it would hurt to leave it). The second rule will only be applied if unprefixed transition is recognized, in which case whichever of the right-hand side properties that are recognized by the browser will be applied, even if other properties in the list are not recognized.

Your second approach is flawed since the second rule will always be overwritten by the third rule regardless of if any properties on the right hand side are or are not recognized.

I believe the complete list of browser prefixed properties to guarantee that you apply transition of 2s to transform on all browsers that are capable is the following, but please read the rational below because it only happens to be this neat for this property pair by chance:

-webkit-transition: -webkit-transform 2s;
   -moz-transition:    -moz-transform 2s;
     -o-transition:      -o-transform 2s;
        transition:         transform 2s;

Note there is no such thing as -ms-transition, but there is a -ms-transform. That being said transition was not added to IE until 10 where -ms-transform was also outdated by unprefixed transform. Hence for IE the only rule we need is "transition: transform".
I will additionally note that any time we have a browser prefix for transition (< Chrome 26, < Firefox 16, < Safari 6.1, < Opera 12.1), then transform was definitely still prefixed as well (< Chrome 36, < Firefox 16, all Safari, < Opera 23), meaning we can leave off the unprefixed version of transform following a prefixed rule.
Since Firefox released unprefixed transition at the same time as their unprefixed transform, we do not need the prefixed "-moz-transform" on the right-hand side of the unprefixed "transition".
Opera at some point used -webkit- prefix for transform in addition to -o-, however they started using -webkit-transform in version 15, after starting to use prefixless transition in version 12.1, so we do not need to include the -webkit-transform after -o-transition. Also since Opera only used prefixless or -webkit-transform after version 12.1, we do not need to include -o-transform after the prefixless transition.
In this case we do not have to include -webkit-transform to the right of prefix-less transition because browsers that only recognize -webkit-tranform will fall back to -webkit-transition and still apply this property.

If you don't mind the length of your CSS though, the following should be a safe generalized solution for ensuring proper browser prefixing of transition and a prefixed right hand property. UPDATE NOTICE As it turns out this approach may not be safe on Safari since they do not follow the W3 standard on ignoring unrecognized properties to the right of transition if there is one that is prefixed and one that is not.

-webkit-transition: -webkit-property,
                            property;
   -moz-transition:    -moz-property,
                            property;
    -ms-transition:     -ms-property,
                            property;
     -o-transition:      -o-property,
                    -webkit-property,
                            property;
        transition: -webkit-property,
                       -moz-property,
                        -ms-property,
                         -o-property,
                            property;

CSS3 Transforms and Transitions (Webkit)