p.state_txt.js-stateTxt
| アニメーション中だよ！
.container
.item.js-item
.state_txt {
text-align: center;
&.is-end {
color: red;
}
}
.container {
height: 300px;
}
.item {
width: 50px;
height: 50px;
margin: 50px auto 0;
background-color: #123;
border-radius: 5px;
animation: animeSample 1s ease .5s forwards;
}
@keyframes animeSample {
0% { transform: translate3d(0, 0, 0); }
40% { transform: translate3d(50px, 10px, 0); }
80% { transform: translate3d(-50px, 10px, 0); }
100% { transform: translate3d(0, -40px, 0); }
} $('.js-item').on('transitionend animationend', function() {
$('.js-stateTxt').text('アニメーション終わり！').addClass('is-end');
});
External CSS
This Pen doesn't use any external CSS resources.