Html CSS使用“设置动画关键帧”；“左”；随着运动的进行'；我不能在internet explorer中工作

我目前正在从头开始学习网页设计，并开始尝试动画，特别是@keyframes。我最初只是在使用chrome进行设计，并愚蠢地认为这将适用于所有浏览器。在测试了一个在chrome、opera和firefox中运行的更复杂的动画之后，我尝试了InternetExplorer/Edge，不透明度动画工作了，但我用于翻译的方法没有。我只是编辑一个列表项的左边值，以便将列表项“移动”到另一边。 HTML:

我还将链接到一个，以便您可以在internet explorer中看到预期效果和无效果的视觉差异。我试图将meta标记更改为 http equiv=“X-UA-Compatible”content=“IE=edge”基于一篇单独的帖子，但这也不起作用。我认为这是一个问题，因为我误解了浏览器如何处理“左”

感谢您的帮助：）

解决方案是：

#navigationBar ul{
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
    list-style-type:none;
    display:table;
    width:49.8%;
    height:5%;
    top:6px;
    float: right;
    -webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}

#navigationBar li{
    position:relative;
    top:0;
    left:0;
    right:8px;
    margin:0;
    padding:0;
    display:table-cell;
    vertical-align:middle;
    width:20%;
}

它在Edge和IE中工作。 在

#导航栏ul

中，我添加了

float:right和删除<代码>左侧：50%；并将动画代码从
#navigationBar li
移动到
#navigationBar ul
@关键帧listEntranceAnimation{
0%{
左：50%；
}
100%{
左：0；
}
}
@-o关键帧listEntranceAnimation{
0%{
左：50%；
}
100%{
左：0；
}
}
@-webkit关键帧listEntranceAnimation{
0%{
左：50%；
}
100%{
左：0；
}
}
@-moz关键帧listEntranceAnimation{
0%{
左：50%；
}
100%{
左：0；
}
}
@-ms关键帧listEntranceAnimation{
0%{
左：50%；
}
100%{
左：0；
}
}
html，正文{
身高：100%；
宽度：100%；
}
身体{
保证金：0；
填充：0；
边界：0；
背景色：#0f0f；
}
#导航栏{
位置：相对位置；
保证金：0；
填充：0；
身高：100%；
排名：0；
左：0；
右：0；
宽度：100%；
}
#导航栏{
位置：相对位置；
//保证金：0；
填充：0；
溢出：隐藏；
列表样式类型：无；
显示：表格；
宽度：49.8%；
//左：50%；
身高：5%；
顶部：6px；
浮动：对；
-webkit动画：listEntranceAnimation 4s ease 0s 1普通转发；
-o-animation:listentraceanimation 4s ease 0s 1正常向前；
-moz动画：listentraceanimation 4s ease 0s 1正常向前；
动画：listEntranceAnimation 4s ease 0s 1普通转发；
-ms动画：listEntranceAnimation 4s ease 0s 1正常转发；
}
#导航栏李{
位置：相对位置；
排名：0；
左：0；
右：8px；
保证金：0；
填充：0；
显示：表格单元格；
垂直对齐：中间对齐；
宽度：20%；
}
#导航栏李a{
保证金：0；
填充：0；
显示：块；
文本对齐：居中；
z指数：100；
颜色：rgba（255255,1）；
}

主页

关于
投资组合
服务
联系人
博客


@keyframes listEntranceAnimation{
    0%{
        left:50%;
    }
    100%{
        left:0;
    }
}
@-o-keyframes listEntranceAnimation{
    0%{
        left:50%;
    }
    100%{
        left:0;
    }
}
@-webkit-keyframes listEntranceAnimation{
    0%{
        left:50%;
    }
    100%{
        left:0;
    }
}
@-moz-keyframes listEntranceAnimation{
    0%{
        left:50%;
    }
    100%{
        left:0;
    }
}
@-ms-keyframes listEntranceAnimation{
    0%{
        left:50%;
    }
    100%{
        left:0;
    }
}
html, body{
    height:100%;
    width:100%;
}
body{
    margin:0;
    padding:0;
    border:0;
    background-color:#0f0f0f;
}
#navigationBar{
    position:relative;
    margin:0;
    padding:0;
    height:100%;
    top:0;
    left:0;
    right:0;
    width:100%;
}

#navigationBar ul{
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
    list-style-type:none;
    display:table;
    width:49.8%;
    left:50%;
    height:5%;
    top:6px;

}
#navigationBar li{
    position:relative;
    top:0;
    left:0;
    right:8px;
    margin:0;
    padding:0;
    display:table-cell;
    vertical-align:middle;
    width:20%;
    -webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}
#navigationBar li a{
    margin:0;
    padding:0;
    display:block;
    text-align:center;
    z-index:100;
    color:rgba(255,255,255,1);
}

#navigationBar ul{
    position:relative;
    margin:0;
    padding:0;
    overflow:hidden;
    list-style-type:none;
    display:table;
    width:49.8%;
    height:5%;
    top:6px;
    float: right;
    -webkit-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -o-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -moz-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
    -ms-animation:listEntranceAnimation 4s ease 0s 1 normal forwards;
}

#navigationBar li{
    position:relative;
    top:0;
    left:0;
    right:8px;
    margin:0;
    padding:0;
    display:table-cell;
    vertical-align:middle;
    width:20%;
}