как применить переход CSS для фонового изображения

Question

Как добавить фоновый переход к фоновому размера, если код следующим образом:

jsfiddle ссылку на полный код: https://jsfiddle.net/3x4vhtj6/

div { 
    background-size: 100% auto; 
} 

div:hover { 
    background-size: auto 100%; 
} 

Обновлено

Если это невозможно в текущей версии css, это их другой способ сделать этот эффект с помощью js или jquery.

Answer 1

Свойство transition - это то, что вы ищете. Однако для перехода на работу вам необходимо использовать фиксированные значения.

Если у вас нет выбора, вы можете использовать jQuery для вычисления значений, а затем добавить свойства css с помощью метода jQuery .css().

Для вашего случая использования, вы могли бы написать что-то вроде этого:

JQuery:

$('.my-div').css({ background-size: getBackgroundSize() }); 

CSS:

div.my-div { 
    transition: all 1s; 
} 

div.my-div:hover { 
    transition: all 1s; 
}