css3 animation linking and repeating - css

Question

Ok so I am pretty new to css3 animations and I am trying to get to grips with it. So what I am trying to do is animate two images one to slide from the bottom and the other to slide in from the right and then repeat this. I have the images sliding in ok but what I cant get to work is repeating the 1st animation after the last has ended.
Below is the css that I have at the min:
.image-1{
-webkit-animation-iteration-count : infinite;
float:right;
animation-name: slideUp, hide;
-webkit-animation-name: slideUp, hide;
-moz-animation-name: slideUp, hide;
animation-duration: 1s, 6s;
-webkit-animation-duration: 1s, 6s;
-moz-animation-duration: 1s, 6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
opacity: 0;
}
.image-2{
float:right;
animation-name: slideLeft, hide;
-webkit-animation-name: slideLeft, hide;
animation-duration: 1s, 6s;
-webkit-animation-duration: 1s, 6s;
-moz-animation-duration: 1s, 6s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay:6s, 6s;
-moz-animation-delay:6s, 6s;
-webkit-animation-delay:6s, 6s;
-o-animation-delay:6s, 6s;
opacity: 0;
}
#keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-moz-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-webkit-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
#-o-keyframes hide
{
from { opacity: 1; } to { opacity: 1 }
}
/*
==============================================
slideUp
==============================================
*/
#keyframes slideUp {
0% {
transform: translateY(100%);
opacity: 0.0;
}
50%{
transform: translateY(-2%);
opacity: 1;
}
65%{
transform: translateY(4%);
opacity: 1;
}
80%{
transform: translateY(-1%);
opacity: 1;
}
95%{
transform: translateY(2%);
opacity: 1;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(100%);
opacity: 0.0;
}
50%{
-webkit-transform: translateY(-3%);
opacity: 1;
}
65%{
-webkit-transform: translateY(5%);
opacity: 1;
}
80%{
-webkit-transform: translateY(-1%);
opacity: 1;
}
95%{
-webkit-transform: translateY(2%);
opacity: 1;
}
100% {
-webkit-transform: translateY(0%);
opacity: 1;
}
}
/*
==============================================
slideLeft
==============================================
*/
#keyframes slideLeft {
0% {
transform: translateX(150%);
}
50%{
transform: translateX(-8%);
}
65%{
transform: translateX(4%);
}
80%{
transform: translateX(-4%);
}
95%{
transform: translateX(2%);
}
100% {
transform: translateX(0%);
}
}
#-webkit-keyframes slideLeft {
0% {
-webkit-transform: translateX(150%);
}
50%{
-webkit-transform: translateX(-8%);
}
65%{
-webkit-transform: translateX(4%);
}
80%{
-webkit-transform: translateX(-4%);
}
95%{
-webkit-transform: translateX(2%);
}
100% {
-webkit-transform: translateX(0%);
}
}

Answer 1

You can start a repeating animation with a delay (this delay should be the time your first animation takes) by using
animation-delay:2s;
and you repeat by using
animation-iteration-count:infinite;
You can find a nice example with all css3 animation properties here:
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation4