Transition without properties specified

Question

I am learning how to make modal images in CSS and came across this example where there are two declaration blocks containing a transition specifying only the duration(?):

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

and

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

It is written on the chapter 'How to...Modal Images' . (w3Schools). Is this correct? and if yes, is it a replacement for transition: all 0.3s; ?

score 5 · Answer 1 · edited May 23 '17 at 12:14

Like Sean said the initial value for transition is all. This does not mean you should use it like that though. It is known that using the initial value could cause drawbacks in performance, read this.

It is better if you declare each value that you want your transition be applied to. You may not see the performance hit at first, but as you keep extending your CSS file it is something you want to keep an eye on.

Examples:

Without declaring all value:

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: 0.5s ease-in;
}
.shape:hover {
  border-radius: 0;
  width: 100px;
  height: 100px;
}

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

Declaring all value:

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: all 0.5s ease-in;
}
.shape:hover {
  border-radius: 0;
  width: 100px;
  height: 100px;
}

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

Better performance:

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: border-radius 0.5s ease-in, width 0.5s ease-in, height 0.5s ease-in;
}
.shape:hover {
  border-radius: 0;
  width: 100px;
  height: 100px;
}

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

Even better Perfomance

If you can afford the element overlap and the border-width increment to avoid redraw.

.shape {
  display: inline-block;
  border-radius: 50%;
  border: 20px solid;
  border-color: #4285F4 #0F9D58 #F4B400 #DB4437;
  width: 50px;
  height: 50px;
  transition: border-radius 0.5s ease-in, transform 0.5s ease-in;
  transform-origin: top left;
}
.shape:hover {
  border-radius: 0;
  transform: scale(2);
}

<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>

Read this for further explanation.

score 4 · Accepted Answer · answered Aug 13 '16 at 20:39

According to the MDN, the initial value for transition-property is all, so if you don't specify it in the shorthand transition it should function the same way.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

Same thing from the W3: https://www.w3.org/TR/css3-transitions/#the-transition-property-property-

Transition without properties specified

2 Answers2