コーディングテクニックの実装内容
CSSで画像がバウンドするアニメーションを実装するテクニックをご紹介します
実装所要時間:10分程度
CSS,JavaScriptの記述内容
実装に必要なとスタイルはこれだけです。
.block {
width: 768px;
margin: 50px auto 0;
}
.block.active {
animation-duration: 1.5s;
animation-fill-mode: both;
animation-name: animation;
transform-origin: center bottom;
}
@keyframes animation {
0%,
100%,
30%,
60% {
transform: translateY(0);
}
20% {
transform: translateY(-30px);
}
40% {
transform: translateY(-15px);
}
}
@media screen and (max-width:640px){
.block {
width: 100%;
}
}
実装のポイント
現在制作中
スポンサーリンク