鹿児島のWebデザイナー小田聖夏のリアルブログ｜失敗、悩み、裏話

８回目　ＣＳＳで位置を移動させてみる

位置を移動

--[ html ]-----------------------
<section>
<h1 class="ugokasu1">位置移動でござる</h1>
</section>

--[ CSS ]------------------------
.ugokasu1{
	  animation: ugokuzo 8s;
	  animation-iteration-count: 5;
	  -webkit-animation: ugokuzo 8s; /* Safari & Chrome */
	  -webkit-animation-iteration-count: 5;
	  background: #ff3366;
	  border-radius: 10px;
 	  color: #ffffff;
	  font-size: 14px;
 	  margin-bottom: 30px;
 	  padding: 10px;
 	  width: 200px;
}

	@keyframes ugokuzo {
	  0%   { transform:  translate(0px, 0px);    }
	  50%  { transform:  translate(300px, 0px);   }
	  100%   { transform:  translate(0px, 0px);    }
	}
	@-webkit-keyframes ugokuzo {
	  0%   { -webkit-transform:  translate(0px, 0px) ;   }
	  50%  { -webkit-transform:  translate(300px, 0px);   }
	  100%   { -webkit-transform:  translate(0px, 0px) ;   }
	}