CODEWITHSUNDEEP
htmlcssanimationcss-animations
Ben Carey
Ben Carey

Reputation: 16958

Unsmooth keyframe animation using CSS

I have a keyframe animation within my site; it is extremely basic but it seems to be running a little 'glitchy'.

I appreciate that this could be due to many factors but as I do not have extensive experience with CSS Keyframes, I was hoping someone would be willing to look at my code and ascertain whether I am doing it correctly?

Here is my code:

div {display:block;position:absolute;left:0;bottom:20px;right:0;text-align:center;z-index:2;}
a {display:inline-block;font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:2px;color:#000;text-decoration:none;text-transform:uppercase;}
a:after {content:'\f107';display:block;font-family:FontAwesome;font-size:30px;margin:5px auto 0;animation:bounce 2s infinite;}

/* Scroll down bounce */
@keyframes bounce {
	0%, 20%, 80%, 100% {transform: translateY(0);}
	50% {transform: translateY(-10px);}
}
<div>
    <a>Scroll Down</a>
</div>

Bonus

Ideally I would actually like the animation to bounce in order to stand out more but I failed to get this to to work. If anyone can see a way to amend this to apply a more 'bounce' effect I would very much appreciate it...

Upvotes: 0

Views: 108

Answers (2)

Rohit Kumar
Rohit Kumar

Reputation: 2031

Its just because the animation-duration is too high 2s and the transform distance is low, either lower the duration or increase the transformY - demo

Also you can make the animation feel like bouncing by adjusting the transform values at different keyframes, just for example -

@keyframes bounce {
    50% {transform: translateY(0);}
    0%, 25%, 75%, 100% {transform: translateY(-10px);}
}

Fiddle Demo

Upvotes: 1

Derek Story
Derek Story

Reputation: 9583

It depends on what you mean by bounce. You could add a couple more keyframe animations to make it seem like its bouncing a little when it hits the bottom:

JS Fiddle

 @keyframes bounce {
    0%, 70%, 100% {
        transform: translateY(0);
    }

    50%, 85% {
        transform: translateY(-10px);
    }
}

Upvotes: 1

Related Questions