Javascript 单击按钮开始半圆动画

我正在试着让我的循环加载器运行。但在单击“尝试”按钮时，未找到如何运行动画

有什么想法吗

<div class="chart-skills">
  <div class="liElem" id="eins"></div>
</div>

<div class="chart-skills" id="bottom">
  <div class="liElem" id="zwei"></div>
</div>

<button onclick="myFunction()">Try it</button>

试试看

---

代码如下：

单击按钮即可实现动画效果：

函数myFunction（）{
$（'.liElem'）.remove（）；
$（“.chart skills”）.html（“”）；
}

正文{
字体：标准16px/1.5“Roboto”，无衬线；
填充：130px0；
背景#f1f1；
}
/*重置样式
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.图表技巧{
保证金：0自动；
填充：0；
列表样式类型：无；
}
.图表技能*，
图表技能：：之前{
框大小：边框框；
}
/*图表技能风格
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.图表技巧{
位置：相对位置；
宽度：350px；
高度：175px；
溢出：隐藏；
}
.图表技能：：之前，
图表技能：：之后{
位置：绝对位置；
}
图表技能：：之前{
内容：''；
宽度：继承；
身高：继承；
边框：45px固体rgba（211211211211.3）；
边框底部：无；
边框左上半径：175px；
边框右上角半径：175px；
}
图表技能：：之后{
内容：''；
左：50%；
底部：10px；
转化：translateX（-50%）；
字号：1.1rem；
字体大小：粗体；
颜色：卡德蓝；
}
.图表技能.利勒姆{
位置：绝对位置；
最高：100%；
左：0；
宽度：继承；
身高：继承；
边界：45px固体；
边界顶部：无；
边框左下半径：175px；
边框右下半径：175px；
变换原点：50%0；
变换样式：保留-3d；
背面可见性：隐藏；
动画填充模式：正向；
动画持续时间：.4s；
动画计时功能：线性；
}
.图表技能{
z指数：4；
边框颜色：绿色；
动画名称：旋转一个；
动画延迟：.4s；
}
.图表技巧#zwei{
z指数：4；
边框颜色：绿色；
动画名称：旋转一个；
动画延迟：.8s；
}
@关键帧旋转一个{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（180度）；
/**
*32%=>57.6度
*57.6+21.6=>79.2德格
*/
}
}
#底部{
变换：比例（-1）；
}

试试看

，非常感谢。这有助于我理解。没有ajax，就没有其他方法了。