バッジが小刻みに揺れるアニメーションを設定したい
「New」と書かれたバッジを横方向に小刻みに移動させます。ただし、アニメーションするのはマウスポインタがボックスにホバーしているときだけで、そうでないときは停止します。キーフレームアニメーション機能を使います。キーフレームアニメーションを再生・一時停止するには、animetion-play-stateプロパティの値を「paused」にして、ホバー時には「running」にすると、アニメーションの再生・一時停止を切り替えることができます。また、このサンプルでは開始キーフレーム、終了キーフレームだけでなく、中間のキーフレームを複数設定しています。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8">
<style>
.keyvisual{
position: relative;
width:800px;
}
.badge{
position: absolute;
right: 20px;
top:-8px;
padding-top: 20px;
width: 60px;
height: 40px;
border-radius: 50%;
background:#ff4f00;
text-align: center;
font-size:12px;
font-weight: bold;
color:#ffffff;
box-shadow:0px 6px 6px 0px rgba(0,0,0,0.5);
animation-name: badge_rotation;
animation-duration: 0.5s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-play-state: paused;
}
.badge:hover{
animation-play-state: running;
}
@keyframes badge_rotation{
0%{
transform: translateX(0);
}
20%{
transform: translateX(-8px);
}
40%{
transform: translateX(8px);
}
60%{
transform: translateX(-2px);
}
80%{
transform: translateX(2px);
}
100%{
transform: translateX(0);
}
}
.thumbnail{
margin-bottom:10px;
font-size:0;
}
.thumbnail img{
width: 100%;
}
</style>
</head>
<body>
<div class="keyvisual">
<div class="badge">NEW</div>
<div class="thumbnail">
<img src="./images/keyvisual.jpg" alt=""/>
</div>
</div>
</body>
</html>実行結果
