css - 如何定义css动画？

Question

我已经编写了这段代码来使矩形像汽车一样从左向右移动，但这不起作用。我认为 @keyframes 示例有问题

* {
  margin: auto;
  padding: 0px;
}

body {
  background-color: lightgreen;
}

.main {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.road {
  height: 300px;
  width: 100%;
  background-color: black;
  margin-top: 25%;
}

@keyframes example {
  from {
    top: 20%;
    left: 80%
  }
  20% {
    top: 20%;
    left: 60%
  }
  40% {
    top: 20%;
    left: 50%
  }
  60% {
    top: 20%;
    left: 30%
  }
  80% {
    top: 20%;
    left: 10%
  }
  to {
    top: 20%;
    left: 0%
  }
}

@-webkit-keyframes example {
  0% {
    top: 20%;
    left: 80%
  }
  20% {
    top: 20%;
    left: 60%
  }
  40% {
    top: 20%;
    left: 50%
  }
  60% {
    top: 20%;
    left: 30%
  }
  80% {
    top: 20%;
    left: 10%
  }
  100% {
    top: 20%;
    left: 0%
  }
}

@-moz-keyframes example {
  0% {
    top: 20%;
    left: 80%
  }
  20% {
    top: 20%;
    left: 60%
  }
  40% {
    top: 20%;
    left: 50%
  }
  60% {
    top: 20%;
    left: 30%
  }
  80% {
    top: 20%;
    left: 10%
  }
  100% {
    top: 20%;
    left: 0%
  }
}

.car {
  height: 100px;
  width: 200px;
  background-color: red;
  font-size: 50px;
  color: black;
  text-align: center;
  vertical-align: middle;
  margin-top: 100px;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  -webkit-animation-name: example;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: example;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count: infinite;
}

Answer 1

您需要在 .car 上使用 position: relative 才能像那样显示。

.car {
    position: relative;
    height:100px;
    width:200px;
    background-color: red;
    font-size: 50px;
    color:black;
    text-align: center;
    vertical-align: middle;
    margin-top: 100px;

    animation-name:example;
    animation-duration: 10s;
    animation-iteration-count: infinite;

    -webkit-animation-name: example;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: example;
    -moz-animation-duration: 10s;
    -moz-animation-iteration-count: infinite;
}