image with multiple animations- possible?

so I am animating a "sale sign" image with this html:

<div id="onsale" class="container clearfix">

             <p  data-animate="fadeIn"  data-delay="2200" >

</p>

and with this css to slow it down and repeating:
#onsale .animated {
opacity: 1;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

but instead I would like to fade in once and then do a pulse or flash infinitely. Can 2 animations be combined on same image or div? so one animation fires first and then the second animation starts after the first one ends? or better yet how about a fadeIn while its swinging (simultaneous animations)? code if possible?

Thank you

after playing with the code this works as far as combining 2 animations at same time:

<p data-animate="fadeIn" data-delay="2200" >

</p>

not sure if thats the correct way to do it but it seems to work.

also how about 1 animation following the other? possible?

ignore previous codes- I have been working on it myself and for clarity I have removed all of the css from body and placed into head like so:

.test {
opacity: 1;
-webkit-animation-delay: 4s;
animation-delay: 4s;

-webkit-animation-name: fadeIn, swing;
animation-name: fadeIn, swing;

-webkit-animation-duration: 15s;
animation-duration: 15s;

-webkit-animation-fill-mode: both;
animation-fill-mode: both;
   }

so this gives me a picture that is fading in and swinging at same time. But I would also like to have it fade in, finish fading in and then start swinging. Two separate and distinct actions.

Can this be done?

**Perfect! **

Two questions:

1. why did you leave inline vs moving css to head? Trying to learn

2. i tweaked your code using some duration tweaks. How would I put a time delay between iterations? The delay "delays" the initial load and duration slows it down... but I would like a pause before starting the swing again. Maybe a 5 second delay.

<div data-animate="fadeIn" data-delay="2200" style= "animation-duration: 4s; -webkit-animation-duration: 4s;" >

</div>

I suspect the answer revolves around adding keyframes and creating a longer animation... but unsure how or where to implement this