Задача заключается в том, чтобы при наведении курсора мыши картинка смещалась на заданное количество px, но никак не хочет срабатывать! Прошу помощи, кто с таким сталкивался?
jQuery(document).ready(function() {
$(".logo").mouseover(function(event) {
$(".logo").css(
{"background-position":"0px 0px",
"transition-duration":"5s",
"animation":"animatedBackground"
});
}
)
})
@keyframes animatedBackground {
from {
background-position: 0px 0px; }
to {
background-position: 500px 0px; }
}
@-webkit-keyframes animatedBackground {
from {
background-position: 0px 0px; }
to {
background-position: 500px 0px; }
}
.logo {
width: 600px;
height: 300px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT64cprQO-leFSi_6p8BcHqzU1vJnh4afu6dcegcdnG5JCw4mo7");
background-position: 0px 0px;
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="logo"></div>