Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 webkit transition trasform translate: invalid property value?

Tags:

html

css

-webkit-transition-property: translate
-webkit-transform:translate(-320px, 0px);

I have those lines in my css file but this doesn't work in chrome: if I fire up chrome developer tools and inspect css for elements whose style contains those lines i see an hazard icon that tells 'invalid property value'

webkit-transition

what happens? is this obsolete?

like image 641
JackNova Avatar asked Apr 05 '12 12:04

JackNova


People also ask

What is a transition property in CSS?

Definition and Usage. The transition-property property specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes). Tip: A transition effect could typically occur when a user hover over an element.

What is the difference between transform and transition in CSS?

The Transform property in CSS moves or modifies the appearance of an element, whereas the Transition property seamlessly and gently transitions the element from one state to another. In this blog, we will deep dive into the CSS Transform and Transition properties that will help you in creating simple and cool animations with fewer lines of code.

What is the <translation-value> CSS data type?

The <translation-value> CSS data type is used in the arguments for certain transform functions, including translate (), translateX (), translateY (), and translate3d ().

What is a transition effect in HTML?

Tip: A transition effect could typically occur when a user hover over an element. Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect. The numbers in the table specify the first browser version that fully supports the property.


1 Answers

You need to use the exact css style in the value of transition-property. So what you would want is:

-webkit-transition-property: -webkit-transform

Whatever the value is needs to be a legit CSS property (exactly). Lemme know if this works! Seems good to me in Chrome.

like image 136
Colin Godsey Avatar answered Oct 30 '22 11:10

Colin Godsey