CODEWITHSUNDEEP
cssanimationrotationcss-animations
iceberg
iceberg

Reputation: 113

CSS rotate animation

I'm trying to get this animation to hold it's final state/last frame using css.

animation-fill-mode: forwards; is not working. Is there anyway I can get it to stop returning to beginning position?

jsFiddle with broken animation

.rotate{

  animation: animationFrames ease 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/ 
}

@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -moz-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -o-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
    -ms-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

Upvotes: 2

Views: 5085

Answers (2)

apaul
apaul

Reputation: 16180

It looks like you may have had some syntax issues, the syntax for the animation shorthand property is:

name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

.rotate {
  animation: animationFrames 4s ease 0s 1 normal forwards running;
  transform-origin: 50% 50%;
  position: absolute;
}
@keyframes animationFrames {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    transform: translate(0px, -10px) rotate(-45deg);
  }
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

Note that this will work in modern versions of Firefox and Chrome without the browser prefixes.

Upvotes: 1

gopalraju
gopalraju

Reputation: 2309

Method 1:

Use animation-direction: alternate; to reverse the animation.

Fiddle: http://jsfiddle.net/jgvkjzqb/5/

.rotate{

  animation: animationFrames ease 4s;
  animation-iteration-count: 2;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 4s;
  -webkit-animation-iteration-count: 2;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/ 
   -webkit-animation-direction: alternate;
   animation-direction: alternate;
  
  

  
}

@keyframes animationFrames{
  0% {
transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
-moz-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-moz-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
-webkit-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-webkit-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
-o-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-o-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
-ms-transform:  translate(0px,0px)  rotate(0deg) ;
  }
  100% {
-ms-transform:  translate(0px,-10px)  rotate(-45deg) ;
  }
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

Method 2:

Try doing the rotate(-45deg) transition at 50% and rotate(0deg) at 100%.

Fiddle: http://jsfiddle.net/jgvkjzqb/2/

  .rotate {
animation: animationFrames ease 8s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards;
/*when the spec is finished*/
-webkit-animation: animationFrames ease 8s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards
/*Chrome 16+, Safari 4+*/
}
@keyframes animationFrames {
0% {
    transform: translate(0px, 0px) rotate(0deg);
}
50% {
    transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    transform: translate(0px, 0px) rotate(0deg);
}
}
@-moz-keyframes animationFrames {
0% {
    -moz-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -moz-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -moz-transform: translate(0px, 0px) rotate(0deg);
}
}
@-webkit-keyframes animationFrames {
0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -webkit-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
}
}
@-o-keyframes animationFrames {
0% {
    -o-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -o-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -o-transform: translate(0px, 0px) rotate(0deg);
}
}
@-ms-keyframes animationFrames {
0% {
    -ms-transform: translate(0px, 0px) rotate(0deg);
}
50% {
    -ms-transform: translate(0px, -10px) rotate(-45deg);
}
100% {
    -ms-transform: translate(0px, 0px) rotate(0deg);
}
}
<body>
  <div> <span class="rotate">G</span>
  </div>
</body>

Upvotes: 0

Related Questions