square.css

MoveImageに戻る

@charset "utf-8";

*{
  margin:0px auto;
  padding:0px;
}
#wrapper{
  width:600px;
  height:600px;
}
	
@-webkit-keyframes symp{
  0%{
    -webkit-transform:translate(0px,0px);
  }
  25%{
    -webkit-transform:translate(0px,250px);
  }
  50%{
    -webkit-transform:translate(300px,250px);
  }
  75%{
    -webkit-transform:translate(300px,0px);
  }
  100%{
    -webkit-transform:translate(0px,0px);
  }
}

@keyframes symp{
  0%{
    transform:translate(0px,0px);
  }
  25%{
    transform:translate(0px,250px);
  }
  50%{
    transform:translate(300px,250px);
  }
  75%{
    transform:translate(300px,0px);
  }
  100%{
    transform:translate(0px,0px);
  }
}

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

#object2{
  position:absolute;
  -webkit-animation-name:symp;
          animation-name:symp;
  -webkit-animation-duration:16s;
          animation-duration:16s;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  -webkit-animation-delay:4s;
          animation-delay:4s;			
}

#object3{
  position:absolute;
  -webkit-animation-name:symp;
          animation-name:symp;
  -webkit-animation-duration:16s;
          animation-duration:16s;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  -webkit-animation-delay:8s;
          animation-delay:8s;			
}

#object4{
  position:absolute;
  -webkit-animation-name:symp;
          animation-name:symp;
  -webkit-animation-duration:16s;
          animation-duration:16s;
  -webkit-animation-timing-function:linear;
          animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
          animation-iteration-count:infinite;
  -webkit-animation-delay:12s;
          animation-delay:12s;			
}