Есть у меня 2 блока, которые по ховеру меняют картинку. При загрузке страницы и наведении на них смена происходит дергано и резко, пока картинки не сохранятся в браузер и дальше и благодаря свойству transition
меняются плавно.
Как избавиться от дерганности смены картинок?
#plasch1,
#plasch2 {
width: 150px;
height: 150px;
margin: 0 auto 20px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#plasch1 {
background: url(http://s019.radikal.ru/i625/1510/c8/9aacc300c120.png) no-repeat 0 0;
}
#plasch2 {
background: url(http://s020.radikal.ru/i720/1510/02/bcd3fcaf61d5.png) no-repeat 0 0;
}
#plasch1:hover {
background: url(http://s019.radikal.ru/i602/1510/96/342189e0bff2.png) no-repeat 0 0;
}
#plasch2:hover {
background: url(http://s017.radikal.ru/i422/1510/a9/1cd5dc8beec1.png) no-repeat 0 0;
}
<div class="plasch-items">
<ul>
<li>
<div id="plasch1"></div>
</li>
<li>
<div id="plasch2"></div>
</li>
</ul>
</div>