在hbuilder环境中css3动画问题

Question

问题遇到的现象和发生背景

在hbuilder环境中css3的动画

用代码块功能插入代码，请勿粘贴截图

/公用样式/
.go {
width: 100px;
height: 100px;
border-radius: 50%;
position: fixed;
top: 30px;
right: 30px;
z-index: 2001;
}
.more {
position: fixed;
right: 60px;
bottom: 85px;
z-index: 2001;
animation: more01 0.4s linear infinite alternate;
}
/内容容器/
.content {
width: 900px;
height: 600px;
background: rgba(0,0,0,.3);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -450px;
}
/第一屏/
.screen01 {
background:url(../img/01-bg.png)no-repeat center bottom;
}
.screen01 .sofa {
position: absolute;
left: 230px;
top: 150px;
animation: sofa01 1s linear infinite alternate;
}
.screen01 .goods {
text-align: center;
margin-top: 230px;
}
.screen01 .fly {
position: absolute;
top: 0;
right: -50px;
animation: fly01 2s linear infinite alternate;
}
/第一屏动画/
@keyframes sofa01{
from{transform: translateY(-10px);}
to{transform: translateY(10px);}
};
@keyframes fly01{
from{transform: translateY(-40px);}
to{transform: translateY(40px);}
};
@keyframes more01{
from{transform: translateY(-10px);}
to{transform: translateY(10px);}
};

运行结果及报错内容

只有一个sofa01一个动画可以实现

我想要达到的结果

全部动画都实现

Answer 1

@keyframes xxx{...};最后的;删除。

@keyframes sofa01{
  from{transform: translateY(-10px);}
  to{transform: translateY(10px);}
}
@keyframes fly01{
  from{transform: translateY(-40px);}
  to{transform: translateY(40px);}
}
@keyframes more01{
  from{transform: translateY(-10px);}
  to{transform: translateY(10px);}
}