Make paragraph bounce

Question

I have a paragraph that in my language says:

START A NEW PROJECT WITH US

I'd like to make this paragraph bounce. What's my best option here if I am not too advanced at coding? The current code used is:

<p><a href="linkhere">START ET<br>
<h4>NYT PROJEKT</h4><br>
MED OS</a></p>

By bounce I basically just mean some way of making the guy browsing the website notice it. There is stuff above and below it, so by it making some sort of a move it'd drag attention.

I know how to give the paragraph an ID, so for test purposes let's just assume the

has the ID paragraphbounce.

This is the CSS I tried.

 @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } .paragraphbounce { animation-name: tada; }

Answer 1

https://jsfiddle.net/ss9tvwje/

/* The animation code */
@keyframes example {
    0% {top:15px}
    33% {top:30px}
    66% {top:40px}
    100% {top:15px}
}

.parent {
  position: relative;
}

/* The element to apply the animation to */
div.bounce {
    animation: example 4s infinite;
    position:absolute;
    top:15px;
    left:15px;
} 

From the sounds of it you want to use CSS animation like in the (simple) example above.