HTMLとCSSの@keyframesとanimationを使ってポケモン捕獲画面のようなボールが左右に動くローディング画面を作ってみました。
CSSのkeyframesとanimationについて
@keyframesはアニメーションの開始から終了までの動きをカスタマイズできるCSSの文法です。
animationプロパティはHTML要素にどのアニメーションを適応するか、アニメーションの時間、繰り返し回数はどを指定することができます。
ソースコード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- ブラウザのCSSをリセット -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loader">
<img src="モンスターボール画像のパス" alt="">
</div>
</body>
</html>
styles.css
@keyframes pokemonGet {
0% {
transform: rotate(0deg);
left: 0;
}
20% {
transform: rotate(-30deg);
left: -10px;
}
40% {
transform: rotate(0deg);
left: 0;
}
60% {
transform: rotate(30deg);
left: 10px;
}
80% {
transform: rotate(0deg);
left: 0;
}
}
.loader {
text-align: center;
position: fixed;
width: 100%;
height: 100%;
z-index:10001;
opacity: 0.95;
background-color: #555;
}
.loader img {
opacity: 1;
width: 100px;
display: inline-block;
position:relative;top:
calc(50% - 50px);
animation-name: pokemonGet;
animation-duration: 2s;
animation-iteration-count: infinite;
}