cssを使ってゲージのアニメーションを作る方法

cssを使ってゲージのアニメーションの作り方を紹介します。

今回は単純にゲージ減っては溜まっていくの繰り返しになります。

シンプルですがこれを参考に手を加えてもらえばいろいろなアニメーションをcssで作れると思います。

cssを使ってゲージのアニメーション

html

<div class="gauge"></div>

css

.gauge{
	position: relative;
	width: 200px;
	height: 10px;
	background: #eee;
}
.gauge:before{
	content: '';
	width: 200px;
	height: 10px;
	background: #eee;
	position: absolute;
	left: 0;
	bottom: 0;
}

.gauge:after{
    content: '';
    width: 15px;
    height: 10px;
    background: #333;
    position: absolute;
    left: 0%;
    bottom: 0;
    animation-name: gaugeGo;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* アニメーション */
@-webkit-keyframes gaugeGo {
   0%  { width: 200px;}
  50%  { width: 100px;}
  100% { width: 0;}
}
@keyframes gaugeGo {
   0%  { width: 200px;}
  50%  { width: 100px;}
  100% { width: 0;}
}

サンプル