akkey247
11/24/2017 - 12:08 AM

【HTML, CSS】動くCSSサンプル

【HTML, CSS】動くCSSサンプル

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>動くCSSサンプル</title>

  <!-- オリジナル CSS -->
  <link rel="stylesheet" href="style.css" />

  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<header>
    <div class="box"></div>
</body>
</html>
style.css
content_copyfile_download
.box {
  width: 100px;
  height: 100px;
  background: #000;
  animation: translate 1s linear infinite;
}

@keyframes translate {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(500px, 0px);
  }
}