Why is the CSS Transition on background-size not working?

Question

Demo: [http://everythinghomegrown.com/] (look at the Customize Your Own section with the four batman images)

For some reason, the background-size is not transitioning. Instead it jumps from one size to the other without a smooth transition.

---

div {
  background-size: 100%;
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

Why is the transition not working? I’m experiencing this in Chrome, Safari, and Firefox.

Answer 1

Solved.

Originally I had this:

div {
  background-size: 100%;
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}

I fixed the problem by adding a second value to the background-size property.

div {
  background-size: 100% 100%; /* added second 100% to fix the problem */
  transition: all 0.2s ease;
}

div:hover, div:focus {
  background-size: 115% 115%;
}