我的CSS動畫正常工作，但無法正常工作

Question

我已經將我的html頁面鏈接到animate.css提供的縮小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，它將在自己的原點旋轉。

您可以運行我的代碼段，並查看它的工作原理。