Transitions for colurs are instant?

Question

I was having some issues doing colour-based transitions...

I was working with the following CSS:

.embtn {
    position:absolute;
    top:0vh ;
    left: 0vw;
    border-radius: 5vw;

    padding: 0.2vw;
    color: red; 
    width: calc(2vw + 1vh); 
    height: calc(2vw + 1vh);
    background-color: white;
    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition-delay: 2s;
    transition: background-color 2s ;
    transition-delay: 2s;
    transition: width 0.5s ease-out;
    transition-delay: 2s;
}
.embtn:hover {


    -webkit-transition: background-color 2s ;
    -webkit-transition: width 0.5s ease-out;
    -o-transition: background-color 2s ;
    -o-transition: width 0.5s ease-out;
    -moz-transition: background-color 2s ;
    -moz-transition: width 0.5s ease-out;
    transition: background-color 2s ;
    transition: width 0.5s ease-out;
    background-color: black;
    width: 30vw;

}

on the following code:

<div class='embtn'><div  id="searchproduct" style="font-size:calc(1vw + 1vh);cursor:pointer; display: inline;" onClick="searchProducts()">&#x1F50D;</div>

<input id="search" style=" color: white; position:absolute; top: calc(((2vw + 1vh)/2)-(1vw + 1vh); );  ; left: 3vw; display: inline; border-style: none; outline: none; background: transparent;  width: 25vw; font-size: calc(1vw + 1vh); " type="text" placeholder=" Search..." name="search" required>
</div>

And was hoping to see the delayed transitions... The width transition worked fine with the intended delay but the colour transition wasn't delaying... i.e. It not only occured instantaneously but it did not wait the 2s before happening...

Any suggestions?

ksav · Answer 1 · 2018-11-04T14:32:13.383

The problem is that you are overwriting one CSS property with another immediately after:

transition: background-color 2s;
transition: width 0.5s ease-out;

If you do this you will not see any transition effect for background-color, because you have overwritten it immediately afterwards to only apply to width.

The correct way to transition multiple CSS properties would be by comma separating each transition like so:

transition: background-color 2s ease-out 0.5s, width 2s ease-out 0.5s;

The shorthand syntax for setting one or more transition properties at once is as follows:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

Have a look at this Multiple animated properties example

And finally, here is your example simplified with a transition on both background-color and width properties.

.embtn {
  border-radius: 5vw;
  width: calc(2vw + 1vh);
  height: calc(2vw + 1vh);
  background-color: white;
  transition: background-color 2s ease-out 0.5s, width 2s ease-out 0.5s;
}

.embtn:hover {
  background-color: black;
  width: 30vw;
}

<div class='embtn'>
  <div id="searchproduct">&#x1F50D;</div>
  <input id="search" type="text" placeholder=" Search..." name="search" required>
</div>

score 1 · Answer 2 · answered Nov 04 '18 at 14:04

First of all, If you need the same hover effect on mouseenter and mouseleave, just set properties on the element without a :hover selector

Secondly, you override background-color transition by setting width transition below. If you have to specify multiple properties (not using all property which is default), list them as comma-separated

.embtn {
    ...
    transition: width 0.5s ease-out 2s, background 2s ease 2s;
}
.embtn:hover {
    ....
}

The syntax for a single property would be

transition: property duration timing-function delay|initial|inherit;

https://www.w3schools.com/cssref/css3_pr_transition.asp

tao · Answer 3 · 2018-11-04T14:18:55.613

To set transitions on more than one property, the correct syntax is to separate each property with commas, in the same transition shorthand declaration, like this:

{
  ...
  transition: background-color 2s ease 2s, width .5s ease-out;
  /*  property ^               ^    ^   ^    ^    ^      ^   ^      
                      duration ^    ^   ^    ^    ^      ^   ^
                    timing-function ^   ^    ^    ^      ^   ^
                                  delay ^    ^    ^      ^   ^
                                    property ^    ^      ^   ^
                                         duration ^      ^   ^
                                         timing-function ^   ^
                                         implicit delay (0s) ^ */
}

This code you have, does the following:

{
  ...
  transition: background-color 2s;
  transition-delay: 2s;
  transition: width 0.5s ease-out;
  ...
}

Does this:

Sets transition-property to background-color, transition-duration to 2s, transition-timing-function to ease (default), transition-delay to 0s
Overrides transition-delay to 2s
Sets transition-property to width, transition-duration to 0.5s, transition-timing-function to ease-out and transition-delay to 0s, which effectively overrides both 1. and 2.

For more in-depth info on how to use transition shorthand I recommend MDN or W3C spec.

Transitions for colurs are instant?

3 Answers3