Posted at

CSS3で、横から移動してくるアニメーション(jqueryでclassを付けるだけ)

More than 1 year has passed since last update.

$('.page-bg').addClass('active');

$('.hero__img').delay(800).queue(function() {
$(this).addClass('fadeInRight').dequeue();
});

@keyframes fadeInRight {

from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}

.hero__img {
opacity: 0;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}