Css中的新手。Can'；我无法复制一个关于青蛙CSS动画的教程

这对我来说有点尴尬，但我的软件工程课程有一个最后的项目，我一直在寻找教程，这样我就可以看到并了解html css和javascript，以便在我的项目中实现它。我从来没有做过这些，所以我找到了一个关于我想在我的项目中实现的一些动画的很酷的教程，所以我决定尝试一下，但我无法让代码正常工作。 这里是教程链接。

这是我的代码（）：

div{
边界半径：50%；
框大小：边框框；
}
迈克先生{
宽度：400px；
保证金：0自动；
垫面：2%；
过渡：所有1；
}
迈克：停下来{
变换：缩放（1.5）旋转（360度）；
}
.头{
宽度：195px；
高度：120px；
背景#92ae57；
位置：相对位置；
z指数：1；
左边距：103px；
}
.眼睛{
宽度：200px；
位置：绝对位置；
底部：45px；
}
.眼睛{
宽度：95px；
高度：93px；
背景色：#ffe13b；
边框：10px实心#92ae57；
显示：内联块；
z指数：2；
动画：眼睛5s无限步开始0s；
}
.眼睛：最后一个孩子{
浮动：对；
}
.学生{
宽度：1px；
高度：1px；
边框：10px实心3535；
显示：内联块；
位置：绝对位置；
顶部：38px；
左边距：27px；
z指数：3；
动画：瞳孔5s无限步开始0s；
}
.学生：最后一个孩子{
浮动：对；
}
.球{
宽度：1px；
高度：1px；
边框：5px实心#6f8346；
位置：绝对位置；
顶部：70像素；
左：88px；
}
.鲍尔：最后一个孩子{
浮动：左；
左边距：14px；
}
.嘴{
高度：100px；
宽度：180px；
边框底部：4px实心#6f8346；
位置：相对位置；
顶部：8px；
左：7px；
}
/*动画*/
@为眼睛设置关键帧{
0%, 100% {
背景#92ae57；
边界半径：50%；
边框：10px实心#92ae57；
} 
5%, 95% {  
背景#ffe13b；
边界半径：50%；
边框：10px实心#92ae57；
}
}
@关键帧瞳孔{
0%, 100% {
不透明度：0；
}
5%, 95% {
不透明度：1；
}
}

我正在使用SublimateText 2并在Chrome中运行。

前缀内容

延迟持续时间仅在第一次开始时延迟动画，而不是在每次迭代时延迟动画

仅使用浮动…使用相对位置，尤其是用于此

看看它的工作原理

@-webkit-keyframes eyes {

    10% {background-color:#92ae57;}
    25% {background-color:#ffe13b;}
}
@-webkit-keyframes pupil {
    10% {opacity: 0;}
    25% {opacity: 1;}
}

.mike:hover {
    -webkit-transform: rotate(360deg) scale(1.5);
}

---

请使用您的代码创建一个。这将提高您获得答案的机会。我可以为realz教您……但它太广泛了，您必须在

动画
和
转换
属性中添加供应商前缀（
-webkit-
用于Chrome）：很抱歉回复太晚，但感谢各位，它工作得非常好。我只需添加供应商规范：）
@-webkit-keyframes eyes {

    10% {background-color:#92ae57;}
    25% {background-color:#ffe13b;}
}
@-webkit-keyframes pupil {
    10% {opacity: 0;}
    25% {opacity: 1;}
}

.mike:hover {
    -webkit-transform: rotate(360deg) scale(1.5);
}