Я использую преобразование CSS3 на фоновом изображении для увеличения при наведении.
Я тестировал в последних браузерах Opera, Safari и Firefox и работал хорошо и плавно, однако в Chrome переход очень рывкий.
Heres - это ссылка, наведите указатель мыши на социальные значки, чтобы понять, что я имею в виду. http://www.media-flare.com/pins/ - Я заметил, что при изменении размера браузера до мобильного вида, становится хуже.
Я сделал здесь версию jsfiddle и замедлил переход, поскольку это труднее увидеть.
http://jsfiddle.net/wsgfz/1/ - Это кажется отрывистым в хроме и firefox, гладко в сафари и в опере.
Есть ли что-нибудь, что я могу сделать, чтобы сделать переход более плавным?
Вот код, если вы не можете просмотреть jsfiddle
HTML
<ul class="social">
<li><a href="" class="fbook">Facebook</a></li>
<li><a href="" class="twit">Twitter</a></li>
<li><a href="" class="tmblr">Tumbler</a></li>
<li><a href="" class="pntrst">Pinterest</a></li>
<li><a href="" class="insta">Instagram</a></li>
<li><a href="" class="rss">RSS</a></li>
</ul>
CSS
.social {
position: relative;
list-style:none;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.social > li > a {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.fbook, .twit, .tmblr, .pntrst, .insta {
background: url(http://placehold.it/350x150) center center;
width: 78px;
height: 90px;
background-size: cover;
float: left;
margin: 30px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.fbook {background-position: 0 0}
.twit {background-position: -78px 0}
.tmblr {background-position: -156px 0}
.pntrst {background-position: -232px 0}
.insta {background-position: -310px 0}
.fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
