Question

我试图在CSS中使用animation属性将div从左移到右。但是代码不起作用。

我是CSS动画属性的新手。我曾在W3Schools和StackOverFlow中提到过一些文章，但仍然没有做到。

#title {
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease;
  animation-direction: normal;
}

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

<div id="title">Soy Boos</div>

Soy Boos这个词应该从左移到右

Answer 1

嘿，@ Gan从w3schools中了解了left property，它具有以下定义和用法

left属性会影响定位元素的水平位置。此属性对未定位元素无效。

•如果位置：绝对；或位置：固定； -left属性将元素的左边缘设置为距离其最近祖先的左边缘左侧的单位。

•如果位置：相对； -left属性将元素的左边缘设置为位于其正常位置左右的单元。

•如果位置：粘性； -当元素位于视口内部时，left属性的行为就像其位置是相对的，而当元素位于视口外面时，其属性是固定的。

•如果位置：静态； -左属性无效。

因此，您只需将position属性添加到#title元素中，left属性就可以工作...

#title{
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease; 
  animation-direction: normal;
  position:relative; /* this one */
}

@keyframes move{
  from {left:0;}
  to {left:200px;}
}

<div id="title">Soy Boos</div>

Answer 2

您需要将public static BufferedImage rotate90(BufferedImage src, int quadrants) { // Allows any multiple of 90 degree rotations (1, 2, 3) int width = src.getWidth(); int height = src.getHeight(); // Compute new width and height boolean swapXY = quadrants % 2 != 0; int newWidth = swapXY ? height : width; int newHeight = swapXY ? width : height; // Build transform AffineTransform transform = new AffineTransform(); transform.translate(newWidth / 2.0, newHeight / 2.0); transform.quadrantRotate(quadrants); transform.translate(-width / 2.0, -height / 2.0); BufferedImageOp operation = new AffineTransformOp(transform, AffineTransformOp.TYPE_NEAREST_NEIGHBOR); // 1:1 mapping return operation.filter(src, null); }或position:absolute设置为 #title

因为要工作position:relative，您需要指定left或absolute之类的职位

relative

#title{
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease; 
  animation-direction: normal;
  position:absolute;
}

@keyframes move{
  from {left:0;}
  to {left:200px;}
}

Answer 3

#title {
  font-size: 8.5em;
  font-weight: bold;
  color: goldenrod;
  animation: move 3s ease;
  animation-direction: normal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes move {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

为什么我的动画属性无法在CSS中使用

3 个答案: