链接无效的HTML/CSS轨道动画

我已经检查了我的代码一千次了，但是我仍然不知道如何允许点击动画对象（比如指向另一个页面的链接）。动画工作得很好，但是当我尝试点击链接时，它们不能正常工作。我知道页面上对象的位置有问题，但我也不知道如何设置它们的动画，所以链接跟随动画。有没有一种方法，我可以做到这一点，只有HTML和CSS？如果我必须使用另一种语言，最好使用Java或Perl

谢谢你的帮助

以下是我的相关html和css：（没有太多的样式，只是基础）

.orbit容器{
位置：绝对位置；
最高：50%；
左：50%；
宽度：550px；
高度：550px；
边缘顶部：-275px；
左边距：-275px；
边框宽度：2倍；
边框样式：虚线；
边框颜色：白色；
边界半径：50%；
-webkit动画：轨道20s线性无限；
-moz动画：轨道20s线性无限；
-ms动画：轨道20s线性无限；
-o-动画：轨道20s线性无限；
动画：轨道20s线性无限；
}
.动态观察文本容器{
位置：绝对位置；
最高：50%；
左：50%；
宽度：550px；
高度：550px；
边缘顶部：-275px；
左边距：-275px；
-webkit动画：轨道20s线性无限；
-moz动画：轨道20s线性无限；
-ms动画：轨道20s线性无限；
-o-动画：轨道20s线性无限；
动画：轨道20s线性无限；
}
@-webkit关键帧动态观察{
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧轨道{
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@-webkit关键帧动态观察文本{
100% {
-webkit变换：旋转（-360度）；
-moz变换：旋转（-360度）；
-ms变换：旋转（-360度）；
-o变换：旋转（-360度）；
变换：旋转（-360度）；
}
}
@关键帧动态观察文本{
100% {
-webkit变换：旋转（-360度）；
-moz变换：旋转（-360度）；
-ms变换：旋转（-360度）；
-o变换：旋转（-360度）；
变换：旋转（-360度）；
}
}
.动态观察文本{
-webkit动画：动态观察文本20s线性无限；
-moz动画：动态观察文本20s线性无限；
-ms动画：动态观察文本20s线性无限；
-o动画：动态观察文本20s线性无限；
动画：动态观察文本20s线性无限；
}
.圆大中心{
最高：50%；
左：50%；
利润上限：-190px；
左边距：-190px；
}
.圈出小顶部{
位置：相对位置；
排名：0；
左：50%；
左边距：-60px；
利润上限：-60px；
}
.在顶部圈出文本{
排名：0；
左：0；
边缘顶部：-245px；
}
.圈出小底{
位置：相对位置；
最高：90%；
左：50%；
左边距：-60px；
利润上限：-60px；
}
.在底部圈出文本{
排名：0；
左：0；
边缘顶部：490px；
}
.向左小圈{
位置：相对位置；
最高：31%；
左：100%；
左边距：-60px；
利润上限：-60px；
}
.将文本圈左{
排名：0；
左：20%；
利润上限：-330px；
左边距：330px；
}
.右小圈{
位置：相对位置；
最高：20%；
左：0；
左边距：-60px；
利润上限：-60px；
}
.将文本圈到右侧{
排名：0；
左：0；
左边距：-550px；
利润上限：-60px；
}
.圆文本中心{
排名：0；
左：0；
宽度：20%；
左边距：130像素；
利润上限：230像素；
}
.圆形按钮大{
位置：绝对位置；
盒影：2px4p02pRGBA（0,0,0,0.1）；
背景色：#F5FAFA；
边界半径：50%；
高度：380px；
宽度：380px；
不透明度：0.9；
}
.背面图像{
背景色：#3383B8；
颜色：#F5FAFA；
背景重复：无重复；
背景位置：中心；
}
.文本中大号{
字体大小：30px；
}
.文本中心{
位置：相对位置；
文本对齐：居中；
填充：10px；
最高：40%；
}

您可以使用

动画播放状态

属性将动画暂停在悬停状态

.orbit-text-container:hover, .orbit-text-container:hover .orbit-text {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
     animation-play-state: paused;
}

.orbit容器{
位置：绝对位置；
最高：50%；
左：50%；
宽度：550px；
高度：550px；
边缘顶部：-275px；
左边距：-275px；
边框宽度：2倍；
边框样式：虚线；
边框颜色：白色；
边界半径：50%；
-webkit动画：轨道20s线性无限；
-moz动画：轨道20s线性无限；
-ms动画：轨道20s线性无限；
-o-动画：轨道20s线性无限；
动画：轨道20s线性无限；
}
.动态观察文本容器：悬停，
.orbit文本容器：悬停.orbit文本{
-webkit动画播放状态：暂停；
-moz动画播放状态：暂停；
-o-动画播放状态：暂停；
动画播放状态：暂停；
}
.动态观察文本容器{
位置：绝对位置；
最高：50%；
左：50%；
宽度：550px；
高度：550px；
边缘顶部：-275px；
左边距：-275px；
-webkit动画：轨道20s线性无限；
-moz动画：轨道20s线性无限；
-ms动画：轨道20s线性无限；
-o-动画：轨道20s线性无限；
动画：轨道20s线性无限；
}
@-webkit关键帧动态观察{
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧轨道{
100% {
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
}
@-webkit关键帧动态观察文本{
100% {
-webkit变换：旋转（-360度）；
-moz变换：旋转（-360度）；
-ms变换：旋转（-360度）；