animationプロパティ
四角いボックスが右→下→左→上と移動（途中で丸くなる）
- keyframeで指定したいアニメーション名を設定
animation-name: move-around; - アニメーション1周にかける時間を設定
animation-duration: 4s; - アニメーションの再生回数を設定
100に設定すると100回再生
「infinite」で無限再生
animation-iteration-count: infinite;
keyframeの指定
- 指定したい地点のプロパティを指定していく
- 右下地点で丸くしたいので50%の位置にborder-radiusを指定
- 100%地点は元に戻るだけの場合は指定しなくてもよい（今回は省略）
@keyframes move-around {
25% {
transform: translate(100px, 0);
border-radius: 0;
}
50% {
transform: translate(100px, 100px);
border-radius: 50%;
}
75% {
transform: translate(0, 100px);
border-radius: 0;
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
@charset "utf-8";
.box {
width: 80px;
height: 80px;
background: pink;
animation-name: move-around;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes move-around {
25% {
transform: translate(100px, 0);
border-radius: 0;
}
50% {
transform: translate(100px, 100px);
border-radius: 50%;
}
75% {
transform: translate(0, 100px);
border-radius: 0;
}
}
animation関連のプロパティ
animation-delay
animation-delay: 1s;- アニメーションの開始を遅延
animation-direction
animation-direction: alternate;- アニメーションを100%まで到達すれば逆再生する
animation-fill-mode
animation-fill-mode: forwards;- アニメーションが終わった後、そのままの状態になってくれる
まとめて指定
animation: move-around 4s infinite 1s alternate;- 数字2つの場合1つめduration、2つ目delay
ローディングアイコン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loading"></div>
</body>
</html>
@charset "utf-8";
.loading {
width: 32px;
height: 32px;
border-top: 8px solid red;
border-right: 8px solid blue;
border-bottom: 8px solid green;
border-left: 8px solid yellow;
border-radius: 50%;
animation: spin 800ms infinite linear;
/* animation-timing-function: linear; */
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
ページ表示後、下からふわっと現れるポップアップメッセージ
- アニメーション後、要素としては画面に残るので、100%時に
pointer-events: none;を指定している
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="message">Hello!</div>
</body>
</html>
@charset "utf-8";
.message {
width: 300px;
background: black;
color: white;
padding: 8px 16px;
border-radius: 4px;
position: fixed;
right: 32px;
bottom: 32px;
animation: popup 2s forwards;
/* animation-fill-mode: forwards; */
}
@keyframes popup {
0% {
/* transform: translateY(100px); */
transform: translateY(10px);
/* display: none; */
opacity: 0;
}
20% {
transform: none;
opacity: 1;
}
80% {
transform: none;
opacity: 1;
}
100% {
/* transform: translateY(100px); */
transform: translateY(10px);
opacity: 0;
pointer-events: none;
}
}