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;
}