CSS Bounce - Animation Idea #4

  • 26 January 2022
  • 0 replies
  • 151 views

Userlevel 7
Badge +6

 

This fun little CSS trick is similar to the sliding bar but moves the entire graphic rather than animating the width. This gives the arrow a sort of “bounce” effect to draw attention.

Turn the arrow and adjust the direction of the “bounce” and you can point out just about anything!

CSS Bouncing Arrow
/* Here is the CSS for the Branding and Look section */

/* Bouncing Arrow */
#arrow {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@keyframes bounce {
100% {transform: translate(20px, 0px);}
}

I added a little inline styling here to position things the way I want. 

<!-- Here is the HTML code for your widget -->

<div style="padding:20px; height:50px;">

<div style="margin-bottom:20px;">
<img id="arrow" src="https://path/to/your/graphic/arrow.png" width="80" height="41" alt="arrowrt.png" /></div>

<div style="position:absolute; left:125px; top:30px;">
This is some text worth looking at!!
</div>

</div>

Are there any other ways you can think of to use something like this?

Please share your ideas.


0 replies

Be the first to reply!

Reply