如何用CSS定义一个动画？

<style type="text/css">
div{
width:100px;height: 100px;
animation: carton 5s;
background:red;
-moz-animation: carton 5s; /* Firefox */
-webkit-animation: carton 5s; /* Safari 和 Chrome */
-o-animation: carton 5s; /* Opera */
}
@keyframes carton{
from {background: red;}
to{background: yellow;}
}
@-moz-keyframes carton{/*firefox*/
from {background: red;}
to{background: yellow;}
}
@-webkit-keyframes carton{/* Safari 和 Chrome */
from {background: red;}
to{background: yellow;}
}
@-o-keyframes carton{/* Opera */
from {background: red;}
to{background: yellow;}
}
</style>