ohenro.css

MoveImageに戻る

@charset "utf-8";

*{
  margin:0px auto;
  padding:0px;
}
#wrapper{
  width:600px;
}

#wra600{
  width:600px;
  height:500px;
  background-image:url(../img/ohenro-1.jpg);
}
	
@-webkit-keyframes symp{
  0%{
    -webkit-transform:translate(500px,200px);
  }
  10%{
    -webkit-transform:translate(400px,240px);
	}
  20%{
    -webkit-transform:translate(300px,200px);
  }
  30%{
    -webkit-transform:translate(200px,300px);
  }
  40%{
    -webkit-transform:translate(100px,300px);
  }
  50%{
    -webkit-transform:translate(120px,200px);
  }	
  60%{
    -webkit-transform:translate(200px,130px);
  }
  70%{
    -webkit-transform:translate(300px,160px);
  }
  80%{
    -webkit-transform:translate(400px,80px);
  }	
  90%{
    -webkit-transform:translate(500px,140px);
  }
  100%{
    -webkit-transform:translate(500px,200px);
  }
}

@keyframes symp{
  0%{
    transform:translate(500px,200px);
  }
  10%{
    transform:translate(400px,240px);
  }
  20%{
    transform:translate(300px,200px);
  }
  30%{
    transform:translate(200px,300px);
  }
  40%{
    transform:translate(100px,300px);
  }
  50%{
    transform:translate(120px,200px);
  }	
  60%{
    transform:translate(200px,130px);
  }
  70%{
    transform:translate(300px,160px);
  }
  80%{
    transform:translate(400px,80px);
  }	
  90%{
    transform:translate(500px,140px);
  }
  100%{
    transform:translate(500px,200px);
  }
}

#object1{
  position:absolute;
  -webkit-animation-name:symp;
          animation-name:symp;
  -webkit-animation-duration:28s;
          animation-duration:28s;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
}