CODEWITHSUNDEEP
htmlcssanimation
Akshay
Akshay

Reputation: 14348

Maintaining continuity of animation

I am trying to create an animation using css the idea is that when hovered the missile falls down(check fiddle link at bottom) rotating so that it will stay almost perpendicular the problem is that there is no continuity in the animation there are a few pauses i think my problem is here

.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}

@-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}  

}

http://jsfiddle.net/tuuqhgk3/2/

Upvotes: 1

Views: 199

Answers (2)

quietbits
quietbits

Reputation: 178

Try updating your anim2 to this:

@-webkit-keyframes anim2 {
    0% {margin-left: 280px; transform: rotate(220deg);}
    15% {margin-top: 80px;}
    100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}  
}

To get smooth animation, you need to calculate exact distances (margin-top, margin-left) that need to change in each % step. I don't think you need to add too many steps in this case.

Also, if you want to repeat animation, you can add "-webkit-animation-iteration-count: infinite;" to your hover .fire/.missile (fire won't disappear, for example).

Upvotes: 1

kretzm
kretzm

Reputation: 771

.boy:hover~ .missile{
  -webkit-animation:anim2 10s;
  -webkit-animation-timing-function: linear;
}

This should give you a continuous animation speed, rather than the easing (pauses) that is set by default. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

Upvotes: 1

Related Questions