Html CSS关键帧动画div不可见
我试图用CSS制作一个非常简单的动画，但是我看不到动画控制的div。 如果我使用inspect元素，我可以看到div在那里，并且正在正确移动，但是它是完全不可见的，即使在我测试它的任何浏览器中也是如此。 下面是我的代码基于的 我的代码：Html CSS关键帧动画div不可见,html,css,css-animations,Html,Css,Css Animations,我试图用CSS制作一个非常简单的动画，但是我看不到动画控制的div。 如果我使用inspect元素，我可以看到div在那里，并且正在正确移动，但是它是完全不可见的，即使在我测试它的任何浏览器中也是如此。 下面是我的代码基于的 我的代码： <html> <head> <style> div { height: 100 px; width: 100px; b
<html>
<head>
<style>
div {
height: 100 px;
width: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {background-color:red; left: 0px; top: 0px;}
50% {background-color:green; left: 100px; top: 0px;}
100% {background-color:blue; left: 50px; top: 50px}
}
</style>
</head>
<body style="width: 100% height: 100%;">
<div></div>
</body>
</html>
div{
高度：100像素；
宽度：100px；
背景色：红色；
位置：相对位置；
动画名称：示例；
动画持续时间：4s；
动画迭代次数：无限；
}
@关键帧示例{
0%{背景色：红色；左侧：0px；顶部：0px；}
50%{背景色：绿色；左侧：100px；顶部：0px；}
100%{背景色：蓝色；左侧：50px；顶部：50px}
}
height: 100 px;