CODEWITHSUNDEEP
htmlcss
ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4393

i want to point up the sharp end of the arrow after rotation of 180 degrees

in this code i'm trying to rotate the icon 180 degree.but it will work as icon rotate 180 degree but the end of the rotation it will face downward direction instead of upward direction.how can i fix this problem?.

my html code:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="troll.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="spinner fa fa-caret-down"></i>
    </body>
</html>

associated CSS:

.spinner {
  -webkit-animation:spin 0.5s linear 1;
  -moz-animation:spin 0.5s linear 1;
  animation:spin 0.5s linear 1;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}
-webkit-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}

Upvotes: 1

Views: 47

Answers (1)

methodofaction
methodofaction

Reputation: 72415

You need to state the fill-mode so that is remains in the last frame, in your code which is the shorthand declaration it would look like this:

.spinner {
  -webkit-animation:spin 0.5s linear 1 forwards;
  -moz-animation:spin 0.5s linear 1 forwards;
  animation:spin 0.5s linear 1 forwards;
}

If you were to declare it independently, the syntax is animation-fill-mode: forwards

Upvotes: 2

Related Questions