Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Units for CSS transition-duration

Is s for seconds the only unit I can use for time values in CSS transition or animations. Can't find anything about it in the specs.

like image 261
Andreas Köberle Avatar asked Aug 17 '12 10:08

Andreas Köberle


People also ask

Can you define the duration of a transition?

The transition-duration property, normally used as part of transition shorthand, is used to define the duration of a specified transition. That is, the length of time it will take for the targeted element to transition between two defined states.

What is the best transition-duration?

In general, the duration of most animations should be in the range of 100–500 ms, depending on complexity and on how far the element is traveling. As a rule of thumb, look for the shortest time that an animation can take without being jarring. It is far more common for animations to be too long than too short.


2 Answers

You can use s(seconds) and ms(milli seconds)

transition-duration property

Syntax

transition-duration: [ , ] * Property values

One or more transition times, separated by commas.

time

Floating-point number, followed by a time units designator (ms or s). 

Values and Units Reference.

like image 196
defau1t Avatar answered Nov 15 '22 21:11

defau1t


you can use milliseconds ms also

Definition and Usage

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.

Look att w3schools

like image 21
mattematico Avatar answered Nov 15 '22 21:11

mattematico