CSS
/*
Main content style
*/
body{background:#E4E4E4;}
.main{
width:300px;
margin:20px auto;
background:#fff;
display:block;
height:300px;
}
/*
Style for ID six
*/
#test_6{
position:relative;
width:300px;
height:300px;
border-left:1px solid red;
border-bottom:1px solid blue;
border-right:1px solid green;
border-top:1px solid #009DD8;
}
#test_6 span{
position:absolute;
display:block;
height:30px;
width:30px;
-o-animation: test_6 10s infinite ease-in-out;
-moz-animation: test_6 10s infinite ease-in-out;
-webkit-animation: test_6 10s infinite ease-in-out;
animation: test_6 10s infinite ease-in-out;
left:45%;
top:45%;
background:red;
-o-border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
}
@-o-keyframes test_6{
0%{-o-transform:translateX(-135px) translateY(0px) ;}
25%{-o-transform:translateX(0px) translateY(135px) ; background:blue;}
50%{-o-transform:translateX(135px) translateY(0px) ;background:green;}
75%{-o-transform:translateX(0px) translateY(-135px) ; background:#009DD8;}
100%{-o-transform:translateX(-135px) translateY(0px) ;}
}
@-moz-keyframes test_6{
0%{-moz-transform:translateX(-135px) translateY(0px) ;}
25%{-moz-transform:translateX(0px) translateY(135px) ; background:blue;}
50%{-moz-transform:translateX(135px) translateY(0px) ;background:green;}
75%{-moz-transform:translateX(0px) translateY(-135px) ; background:#009DD8;}
100%{-moz-transform:translateX(-135px) translateY(0px) ;}
}
@-webkit-keyframes test_6{
0%{-webkit-transform:translateX(-135px) translateY(0px) ;}
25%{-webkit-transform:translateX(0px) translateY(135px) ; background:blue;}
50%{-webkit-transform:translateX(135px) translateY(0px) ;background:green;}
75%{-webkit-transform:translateX(0px) translateY(-135px) ; background:#009DD8;}
100%{-webkit-transform:translateX(-135px) translateY(0px) ;}
}
@keyframes test_6{
0%{transform:translateX(-135px) translateY(0px) ;}
25%{transform:translateX(0px) translateY(135px) ; background:blue;}
50%{transform:translateX(135px) translateY(0px) ;background:green;}
75%{transform:translateX(0px) translateY(-135px) ; background:#009DD8;}
100%{transform:translateX(-135px) translateY(0px) ;}
}
2 Responses