CODEWITHSUNDEEP
htmlcss
user3943298
user3943298

Reputation:

How do I animate a div with CSS3 to move and spin?

I am trying to animate a div to spin 360deg and move 400px to the right. How can I do this using CSS3? Do I need to use CSS3 keyframes? 

<div id="spin"></div>

CSS:

#spin {
   width:200px;
   height:200px;
   background-color:blue;
}

Upvotes: 1

Views: 853

Answers (3)

cameronjonesweb
cameronjonesweb

Reputation: 2506

Yes, you need keyframes:

#spin {
    width: 200px;
    height: 200px;
    background-color: blue;
    -webkit-animation: myanimation 5s;
    animation: myanimation 5s;
}

@-webkit-keyframes myanimation {
    100% { margin-left: 400px; -webkit-transform: rotate(360deg); }
}

@keyframes myanimation {
    100% { margin-left: 400px; transform: rotate(360deg); }
}
<div id="spin"></div>

Upvotes: 3

Devin
Devin

Reputation: 7720

Try this and adjust to your needs:

#spin {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #00f;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
    left: 0px;
  }
  to {
    transform: rotate(360deg);
    left: 400px;
  }
}
<div id="spin"></div>

Upvotes: -1

Timothy
Timothy

Reputation: 1158

add all the prefixes so it works on all modern browsers

-webkit-
-moz-
-ms-
-o-

Upvotes: 2

Related Questions