@keyframes card1_anim {
25% {
background-image: url(../img/12.jpg);
}
50% {
background-image: url(../img/13.jpg);
}
75% {
background-image: url(../img/14.jpg);
}
100% {
background-image: url(../img/15.jpg);
}
}
.card1_anim {
-webkit-transition: all ease;
-o-transition: all ease;
transition: all ease;
-webkit-animation-name: card1_anim;
-o-animation-name: card1_anim;
animation-name: card1_anim;
-webkit-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
Запускает анимацию при наведении:
$(window).scroll(function () {
if ($(this).scrollTop() > 550) {
$('.eco_logo').addClass('bl2_anim');
} else {
$('.eco_logo').removeClass('bl2_anim');
}
})
