CODEWITHSUNDEEP
htmlcssanimation
ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

animation is not working properly in this code

I am new to animation using css. I am developed a code to rotate an icon using css animation,but it is not working and I can't determine what is the error.here is my code:

.rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="star.css">
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
          <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
          <link rel="stylesheet" type="text/css" href="../project/style.css" />
          <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <i class="rotate fa fa-anchor"></i>
        <img class="rotate" src="https://i.sstatic.net/NiTEy.jpg">
    </body>
</html>

Upvotes: 0

Views: 66

Answers (4)

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

.rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@keyframes spin{
  0%{
    transform:rotate(0deg);
    }
  50%{
    transform:rotate(90deg);
    }
  100%{
    transform:rotate(180deg);
    }
}  
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="star.css">
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
          <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
          <link rel="stylesheet" type="text/css" href="../project/style.css" />
          <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <i class="rotate fa fa-anchor"></i>
        <img class="rotate" src="https://i.sstatic.net/NiTEy.jpg">
    </body>
</html>

Upvotes: 0

Jeremy John
Jeremy John

Reputation: 1715

.spinner {
  -webkit-animation:spin 0.5s linear infinite;
  -moz-animation:spin 0.5s linear infinite;
  animation:spin 0.5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
-webkit-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
<img class="spinner" src="http://placehold.it/200x200">

Upvotes: 1

Anju
Anju

Reputation: 167

Try this.

CSS 

.element {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: .7;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


body, html {
  height: 100%;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

HTML:

<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>

Run Code

Upvotes: 1

Head In Cloud
Head In Cloud

Reputation: 2051

Try this

 <i class=" fa fa-anchor fa-spin"></i>


.rotate {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
<script src="https://use.fontawesome.com/79a4552de1.js"></script>
        <i class=" fa fa-anchor fa-spin"></i>
        <img class="fa-spin" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Dell_Logo.png" style="width:100px;">

Upvotes: 1

Related Questions