The most concise way to write CSS transitions

Question

Is there a more concise way to write the following code?

element{ transition: all 700ms linear, transform 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5), background 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5); } 

What I'm trying to do is apply another time synchronization function for conversion and background properties, using linear for the rest of the properties. This works correctly, but I try to keep it as dry as possible.

Answer 1

You can’t do much here. You can specify the duration of the transition separately:

 element{ transition: all linear, transform cubic-bezier(0.4, 0.25, 0.14, 1.5), background cubic-bezier(0.4, 0.25, 0.14, 1.5); transition-duration: 700ms; } 

But about that. You cannot specify your custom curve only once because of how comma values ​​work. The entire list of values ​​is repeated in the order in which they were specified, instead of endlessly repeating the last value.

That is, if you do this:

 element{ transition-property: all, transform, background; transition-duration: 700ms; transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5); } 

It happens that the missing value for transition-timing-function filled as linear , not your custom curve. The result will not match your intended transition for background .

And if you try to take advantage of this, changing the order of the transition properties in such a way that the background value is missing instead:

 element{ transition-property: transform, all, background; transition-duration: 700ms; transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.5), linear; } 

It happens that the all transition will override the transform transition, even if you specify it separately, because all comes later and includes any previously listed properties.

Answer 2

Well, the most DRY way is to use something like SASS and write mixin, and then use that instead of copying pasting this code everywhere. Another suggestion that I will make is to avoid using all , and instead list the properties that you want to animate using a linear transition. Although this may be more verbose, I bet it will be more productive, especially if you've ever put graphically demanding things like box-shadow in an element's style.

So, while your path will work, I feel like the more unique transitions, the more valuable this formulation:

 element { transition-duration: 2s; transition-property: all, background, transform; transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14, 1.5); } 

Of course, I recommended listing properties to avoid costly and unsolicited animations. In this case, something like this makes sense:

 element { transition-duration: 2s; transition-property: height, background, transform, width; transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5), linear; } 

Edit: as @BoltClock mentioned, I was mistaken in everything under this bold, so please ignore it. The arguments, separated by commas, are again applied to the order they originally set - neither the first nor the last repetition for additional transition-property values. I still think that I said that I am not using all is important advice for performance and future validation though!

Notice how I ordered the arguments: if transition-property more transition-timing-function more than arguments, all additional properties will default to the first value specified for transition-property . So, first set the value to linear (the default), then list all your unique synchronization functions so that they match the correct property, and then any properties that you change to the end (e.g. width ) will automatically be linear by default! Thus, even if you add 5 more properties to the end of the property list, only background and transform will have their own unique cubic-bezier synchronization functions. For instance:

 element { transition-duration: 2s; transition-property: height, background, transform, width, oneProp, twoProp, threeProp, etcProp; transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5); } 

All of the above uses the linear time function, except for background and transform . I feel this is a good compromise between performance and DRY CSS. I made jsFiddle for you to check various options - comment on different CSS to try each way:

http://jsfiddle.net/530cumas/4/

Answer 3

In the best case, from my knowledge of CSS (after a quick google), your current method is the shortest (and therefore the “driest”) way to do what you want. Of course I'm not a CSS guru, so I could be completely wrong.