Html CSS3动画出现问题

我用一个小例子来演示CSS动画。虽然颜色正在更改，但未执行旋转。请帮忙修理

p{宽度：100px；高度：100px；背景：红色；动画名称：彼得；动画持续时间：5s}
@关键帧彼得{
来自{背景：橙色；}
到{背景：黄色；变换：旋转（180度；）}
}
这是一段

尝试添加一个

旋转

到

自

以及供应商前缀，以确保所有浏览器的回退

from { 
 background: orange;
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -o-transform: rotate(0deg);         
 transform: rotate(0deg); 
}
to { 
 background: yellow;
 -webkit-transform: rotate(180deg); 
 -moz-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg); 
}

---

分号在

（180deg；）

中放错位置，应在括号

（180deg）之外


p{
宽度：100px；
高度：100px；
背景：红色；
动画名称：彼得；
动画持续时间：5s
}
@关键帧彼得{
从{
背景：橙色；
}
到{
背景：黄色；
变换：旋转（180度）；
}
}
这是一段。