CODEWITHSUNDEEP
htmlcss
Leealp
Leealp

Reputation: 13

My CSS animation is working but not properly

I've linked my html page to a minify css file provided by animate.css and it is supposed to make a picture of div5 rotate according to the center of the picture. But instead, the picture is rotating in a circle. I don't know what I'm doing wrong. Below are the codes from both the html and css files:

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>

Upvotes: 0

Views: 53

Answers (2)

flppv
flppv

Reputation: 4289

According to animate.css docs, you should add animated class to the 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>

Also, note that you've assigned position: absolute to the image. If you will assign it to your div, it will spin across own origin.

You can run my code snippet and see that it works.

Upvotes: 1

Arthur
Arthur

Reputation: 5148

I'm not sure what's the problem because we didn't have any code for animation, but this may be caused because of div's origin are not well placed.

Take a look to CSS TRansform-origin

Upvotes: 1

Related Questions