p.state_txt.js-stateTxt
| ボタンを押してね！
.btn_container
button.btn.js-animeTra(type=button)
| transition
button.btn.js-animeKey(type=button)
| keyframes
.container
.item.js-item.state_txt {
text-align: center;
}
.btn_container {
margin-top: 20px;
text-align: center;
}
.btn {
display: inline-block;
width: 100px;
height: 30px;
border-radius: 4px;
}
.container {
height: 300px;
}
.item {
width: 50px;
height: 50px;
margin: 50px auto 0;
background-color: #123;
border-radius: 5px;
transition: transform 1s ease .5s;
&.is-transition {
transform: translate3d(0, -40px, 0);
}
&.is-keyframes {
animation: animeSample 1s ease .5s forwards;
}
}
@keyframes animeSample {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(0, -40px, 0); }
}// ボタンの判定
$('.js-animeTra').on('click', function() {
$('.js-item').addClass('is-transition');
});
$('.js-animeKey').on('click', function() {
$('.js-item').addClass('is-keyframes');
});
// transition終了判定
$('.js-item').on('transitionend', function() {
$('.js-stateTxt').text('transitionのボタンを押したね！').addClass('is-end');
});
// keyframes終了判定
$('.js-item').on('animationend', function() {
$('.js-stateTxt').text('keyframesのボタンを押したね！').addClass('is-end');
});
External CSS
This Pen doesn't use any external CSS resources.