css move animation

1article {
2    animation-name            : displaceContent;
3    animation-duration        : 1s;
4    animation-delay           : 4s;
5    animation-iteration-count : 1;
6    animation-fill-mode       : forwards;
7}
8@keyframes displaceContent {
9    from { transform : translateY(0em) }
10    to   { transform : translateY(3em) } /* slide down to make room for advertisements */
11}
12

1<style>
2
3  #ball {
4    width: 100px;
5    height: 100px;
6    margin: 50px auto;
7    position: relative;
8    border-radius: 50%;
9    background: linear-gradient(
10      35deg,
11      #ccffff,
12      #ffcccc
13    );
14    /*"Call" the animation "function" */
15    animation-name: bounce;
16    animation-duration: 1s;
17    animation-iteration-count: infinite;
18    animation-delay: 2s;
19    /* Normal, reverse, alternate(between the fwd and back) 
20    and alternate-reverse */
21    animation-direction: reverse; 
22    /* Ease is deafault, use cubic-bezier(n,n,n,n) for custom */
23    animation-timing-function: linear; 
24    
25    /* if you want something to display from hidden
26       set the opacity to 0 and in the keyframe steps bring
27   	   the opacity to 1 gradually to stop it flashing */
28  }
29	
30  /* The animation "bounce" */
31  @keyframes bounce{
32    /* start */
33    0% {
34      top: 0px;
35    }
36    /* step (you can add multiple incremental steps from 1-100) */
37    50% {
38      top: 249px;
39      width: 130px;
40      height: 90px;
41    }
42    /* end (you can count down from 100 to 0 too) */
43    100% {
44      top: 0px;
45    }
46  }
47</style>
48
49<div id="ball"></div>