CODEWITHSUNDEEP
csscss-transitions
Daniel Francis
Daniel Francis

Reputation: 83

CSS calc function for transition-delay

I'm trying to use the CSS calc function inside a transition-delay property.

Transition delay seems to work properly using the syntax:

transition-delay: 0.08s;

The calc property works for me when calculating sizes on the screen but I couldn't make it work for calculating time in this way:

transition-delay: calc(0.08s * 1);

Is it possible to get this result without pre-processors?

UPDATE: Solved

This is actually a valid syntax, but it isn't supported by some browsers including Firefox and IE.

Upvotes: 8

Views: 16352

Answers (2)

Terry
Terry

Reputation: 66103

It does work — calc() is expected to work with measurements[1] involving: length[2] (px, em, ex, ch, rem, %, vw, vh, vmin, vmax, mm, cm and etc), angles[3] (deg, rad, grad, turn), time[4] (ms, s) and even frequency and integers.

If you look at the fiddle below, you can see that the base unit of the transition time is 100ms, but I have multiplied it by 20 to achieve a final transition time of two seconds using calc(). The transition-time is modified and calculated accordingly with no issues.

I suspect the reason why calc() is "not working" in your case is either (1) because the unit of measurement is not supported by a browser you are using, or that (2) you are multiplying the transition-time with a factor of 1, which of course returns the same value ;)

div {
  background-color: #eee;
  width: 200px;
  height: 200px;
  transition: all calc(0.1s * 20) ease-in-out;
}

div:hover {
  background-color: #b13131;
}
<div></div>

Source:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/calc
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/length
  3. https://developer.mozilla.org/en-US/docs/Web/CSS/angle
  4. https://developer.mozilla.org/en-US/docs/Web/CSS/time

Update: I would say that it is very likely that calc() is mostly used to calculate length measurements in browsers, and less commonly so for other kind of measurements, especially when it is still an experimental feature. Here is the results of a rather rudimentary browser test I have made so far:

  • Chrome (39.0): supported
  • Firefox:
    • 32.0.3: not supported
    • 35.0: not supported
  • Internet Explorer (11.0): not supported
  • Safari (8.0.2): not supported

Given the general lack of support for calc() in measurements other than length, I suggest that you stick to a CSS preprocessor, or JS (depending on deployment preference) to achieve the effect you want.

Upvotes: 8

eliteware
eliteware

Reputation: 144

I tried it and it works fine for me. Here check the code

<div id="circle"></div>

#circle{
width:100px;
height:100px;
background:#000;
border-radius:50%;
margin:50px auto;
transition:all calc(1s*2) ease;
}
#circle:hover{
background:#555;
}

Hope this was useful to you http://jsfiddle.net/p243bk8g/1/

Upvotes: 0

Related Questions