CSS Bounce - Animation Idea #4

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!

/* 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.