Question

我已经将我的html页面链接到animate.css提供的mins css文件，并且应该使div5的图片根据图片的中心旋转。但是，图片旋转了一圈。我不知道我在做什么错。以下是html和css文件中的代码：

div .div5 img {
  position: absolute;
  top: 210px;
  left: 230px;
}

div .rotateOut {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="middle">
  <div class="center-portfolio">
    <h3>&emsp;Portfolio</h3>
    <hr>
    <div class="div1"><img src="https://i.imgur.com/UKBsvV0.jpg" height="120px" width="150px"></div>
    <div class="div2"><img src="https://i.imgur.com/TSiyiJv.jpg" height="120px" width="150px"></div>
    <div class="div3"><img src="https://i.imgur.com/ZKMnXce.png" height="120px" width="150px"></div>
    <div class="div4"><img src="https://i.imgur.com/IjlfeYO.jpg" height="120px" width="150px"></div>
    <div class="rotateOut div5"><img src="https://i.imgur.com/fqgm8uh.png" height="120px" width="150px"></div>
    <div class="div6"></div>
    <div class="banner1">career picture 1</div>
    <div class="banner2">chocolate tour</div>
    <div class="banner3">Abidjan</div>
    <div class="banner4">career picture 2</div>
    <div class="banner5">Guild Brussels</div>
  </div>
</div>

Answer 1

我不确定是什么问题，因为我们没有任何动画代码，但这可能是由于div的原产地位置不佳所致。

看看CSS TRansform-origin

Answer 2

根据animate.css docs，您应该将animated类添加到div：

div .div5 {
  position: absolute;
  top: 210px;
  left: 230px;
}

div .rotateOut {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div class="middle">
  <div class="center-portfolio">
    <h3>&emsp;Portfolio</h3>
    <hr>
    <div class="div1"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
    <div class="div2"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
    <div class="div3"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
    <div class="div4"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
    <div class="animated rotateOut div5"><img src="http://placehold.jp/24/cc9999/993333/150x100.png"></div>
    <div class="div6"></div>
    <div class="banner1">career picture 1</div>
    <div class="banner2">chocolate tour</div>
    <div class="banner3">Abidjan</div>
    <div class="banner4">career picture 2</div>
    <div class="banner5">Guild Brussels</div>
  </div>
</div>

此外，请注意，您已为图像分配了position: absolute。如果将其分配给div，它将在自己的原点旋转。

您可以运行我的代码段，看看它是否有效。

我的CSS动画正常工作，但无法正常工作

2 个答案: