Loop animation for css - css

Please how can I get the animation below to continue looping without javascript, just CSS and HTML. So that when it gets to 7, it will start all over from one again and continues that way until the page is closed. I have been on this for over 3 hours. I will appreciate if anyone can please guide me on this.
Thank you in advance.
.merry {
font-family: "Georgia", serif;
font-style: italic;
font-size: 18px;
text-align: center;
}
.merry-text {
left: 0;
margin-bottom: 0;
margin-top: 50px;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.merry-text:nth-of-type(1) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 1s;
}
.merry-text:nth-of-type(2) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 3s;
}
.merry-text:nth-of-type(3) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 5s;
}
.merry-text:nth-of-type(4) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 7s;
animation-fill-mode: forwards;
}
.merry-text:nth-of-type(5) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 9s;
}
.merry-text:nth-of-type(6) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 11s;
}
.merry-text:nth-of-type(7) {
animation-name: rotate;
animation-duration: 2.5s;
animation-delay: 13s;
}
#keyframes rotate {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
}
20%, 80% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
}
<p class="merry">
<span class="merry-text">circle 1</span>
<span class="merry-text">circle 2</span>
<span class="merry-text">circle 3 </span>
<span class="merry-text">circle 4</span>
<span class="merry-text">circle 5</span>
<span class="merry-text">circle 6</span>
<span class="merry-text">circle 7</span>
</p>


Simply by using this:
animation-iteration-count: infinite;

Related

CSS Animation not working smoothly Firefox

I'm having problems with an animation: fadein property running smoothly on some text in Firefox.
Rather than fading in gradually like it goes in Chrome, it just seems to pop up and makes the whole thing look clunky. This also seems weird as the image has the same fadein instructions and fades in smoothly.
I've tried using the -moz prefix but this doesn't seem to help.
Here's my code below.Any suggestions?
.fixed-center {
position: fixed;
top: 50%;
left: 50%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.img-fade {
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
h3 {
text-align: center;
font-size: 24px;
font-weight: normal;
font-style: italic;
opacity: 0.9;
filter: alpha(opacity=90);
text-decoration: underline;
text-decoration-color: white;
moz-text-decoration-color: white;
-webkit-animation: fadein 2s;
-webkit-animation-delay: 0.75s;
-webkit-animation-fill-mode: forwards;
;
-moz-animation: fadein 2s;
-moz-animation-delay: 0.75s;
-moz-animation-fill-mode: forwards;
-ms-animation: fadein 2s;
-ms-animation-delay: 0.75s;
-ms-animation-fill-mode: forwards;
;
-o-animation: fadein 2s;
-o-animation-delay: 0.75s;
-o-animation-fill-mode: forwards;
animation: fadein 2s;
animation-delay: 0.75s;
animation-fill-mode: forwards;
visibility: hidden;
}
<div class="fixed-center">
<p>
<a href="#" class="img-fade">
<img src="http://placehold.it/125x149" width="125" height="149" />
</a>
</p>
<h3><p>enter</p></h3>
</div>

just remove styling for H3 (or you can add center if you want) and do it like this:
https://jsfiddle.net/8z6sj6tr/1/
<div class="fixed-center">
<p>
<a href="#" class="img-fade">
<img src="http://placehold.it/125x149" width="125" height="149" />
</a>
</p>
<h3><p class="img-fade">enter</p></h3>
</div>

Vertically centering Font Awesome icons with transition

I've got these animated divs with a round border with Font Awesome icons in them. What's the best way to vertically align them while keeping them in the middle throughout the transition?
Here's the animation on CodePen
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
}
#keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>

Just with simply adding this to your CSS
CSS
.social span{
position: relative;
top: 50%;
transform: translateY(-50%);
}
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes twitter {
0% {
transform: translate(-178px, -160px);
}
100% {
transform: translate(-178px, -164px);
}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes linkedin {
0% {
transform: translate(168px, -77px);
}
100% {
transform: translate(168px, -84px);
}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes github {
0% {
transform: translate(-198px, 58px);
}
100% {
transform: translate(-198px, 54px);
}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes phone {
0% {
transform: translate(0px, -220px);
}
100% {
transform: translate(0px, -216px);
}
}
.social span {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank">
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>

Add line-height: 80px; to your .social class
.social:hover {
height: 80px;
line-height: 80px;
}
body {
background-color: #3498db;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
line-height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
line-height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes twitter {
0% {
transform: translate(-178px, -160px);
}
100% {
transform: translate(-178px, -164px);
}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes linkedin {
0% {
transform: translate(168px, -77px);
}
100% {
transform: translate(168px, -84px);
}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes github {
0% {
transform: translate(-198px, 58px);
}
100% {
transform: translate(-198px, 54px);
}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;
;
animation-delay: 0s;
animation-iteration-count: infinite;
;
animation-direction: alternate;
}
#keyframes phone {
0% {
transform: translate(0px, -220px);
}
100% {
transform: translate(0px, -216px);
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<a href="https://www.facebook.com/" target="_blank">
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
</a>
<a href="https://twitter.com/" target="_blank">
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
</a>
<a href="https://www.linkedin.com/" target="_blank">
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
</a>
<a href="https://www.github.com/" target="_blank">
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
</a>
<a href="https://www.facebook.com/" target="_blank">
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</a>
</div>

You can use display:table for outer container and display:table-cell and vertical-align:middle for inner element
#facebook, #twitter, #linkedin, #github, #phone {
display:table;
margin:auto
}
.fa {
display:table-cell;
vertical-align:middle
}
irrespective of height it will vertically center the inner content and it is also compatible with older browsers as well http://caniuse.com/#search=vertical-align
body {
background-color: #3498db;
}
.fa {
display:table-cell !important;
vertical-align: middle;
}
.social {
position: absolute;
font-size: 36px;
color: white;
width: 50px;
height: 50px;
border: 4px solid white;
border-radius: 50%;
text-align: center;
padding: 3px;
transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transform-origin: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.social a:visited {
color: currentColor;
}
.social:hover {
background-color: white;
color: #3498db;
width: 80px;
height: 80px;
transform-origin: 50% 50%;
}
#facebook {
animation-name: facebook;
animation-duration: 1000ms;
animation-timing-function: ease-in-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes facebook {
0% {
transform: translate(148px, 78px);
}
100% {
transform: translate(148px, 84px);
}
}
#twitter {
animation-name: twitter;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes twitter {
0% {transform: translate(-178px, -160px);}
100% {transform: translate(-178px, -164px);}
}
#linkedin {
animation-name: linkedin;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes linkedin {
0% {transform: translate(168px, -77px);}
100% {transform: translate(168px, -84px);}
}
#github {
animation-name: github;
animation-duration: 950ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes github {
0% {transform: translate(-198px, 58px);}
100% {transform: translate(-198px, 54px);}
}
#phone {
animation-name: phone;
animation-duration: 900ms;
animation-timing-function: ease-in-out;;
animation-delay: 0s;
animation-iteration-count: infinite;;
animation-direction: alternate;
display:table;
margin:auto;
}
#keyframes phone {
0% {transform: translate(0px, -220px);}
100% {transform: translate(0px, -216px);}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
<div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
<div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
<div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
<div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
<div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
</div>

How to get this using css3?

I want this animation in my fontAwesome icon's border. I have tried a lot but failed.
Here is the animation.
http://postimg.org/image/8k3al48kr/

I don't think it's possible to do it with only one HTML element but the following should work:
.square {
display: block;
width: 100px;
height: 100px;
position: relative;
}
.left, .top, .right, .bottom {
position: absolute;
width: 0px;
height: 0px;
background-color: black;
-moz-animation-duration: 1s;
-moz-animation-fill-mode: forwards;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-o-animation-duration: 1s;
-o-animation-fill-mode: forwards;
-o-animation-iteration-count: 1;
-o-animation-timing-function: ease-in;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}
.left, .right {
-moz-animation-name: drawVertical;
-webkit-animation-name: drawVertical;
-o-animation-name: drawVertical;
animation-name: drawVertical;
width: 1px;
}
.top, .bottom {
-moz-animation-name: drawHorizontal;
-webkit-animation-name: drawHorizontal;
-o-animation-name: drawHorizontal;
animation-name: drawHorizontal;
height: 1px;
}
.left {
left: 0;
bottom: 0;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-moz-animation-delay: 0s;
}
.top {
top: 0;
left: 0;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.right {
right: 0;
top: 0;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.bottom {
bottom: 0;
right: 0;
height: 1px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
#keyframes drawHorizontal {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes drawVertical {
from {
height: 0;
}
to {
height: 100%;
}
}
<div class="square">
<span class="left"></span>
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
</div>

Animated text gets hidden after completion of the animation

I had tried a simple animation. See this fiddle.
HTML:
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>
CSS:
.special_sec span {
font-size:30px;
list-style:none;
text-align:center;
padding:10px 0;
display:block;
animation:subheadinganimation 17s;
color: transparent;
}
In my CSS (.special_sec span), I have added color: transparent.
My problem is:
If color is transparent, after the animation all the text are getting hidden. See my fiddle.
If I remove this color property, all the text are initially visible. Then the animation also runs. See this fiddle.
I want the text to be visible only after the delay timings that I have given. I can't understand the problem. What is the issue? How can I fix this?

You need to set the animation-fill-mode as forwards so that the element would hold the state as at the final keyframe of the animation (which is color: #000). Without this setting, the element reverts back to its original state (color: transparent) after the animation is complete.
animation: subheadinganimation 17s forwards;
#keyframes subheadinganimation {
0%, 30% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
33%,
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
color: #000;
}
}
.special_sec span {
font-size: 30px;
list-style: none;
text-align: center;
padding: 10px 0;
display: block;
animation: subheadinganimation 17s forwards;
color: transparent;
}
span.sub_heading {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
span.sub_heading1 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
span.sub_heading2 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
span.sub_heading3 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
span.sub_heading4 {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>

Image transition with keyframes

Hey guys I am currently building an image show (small) with css3 keyframes, and it is working, but only on firefox in some way, and I cant seem to tackle the problem :( It should work in the latest versions of chrome firefox and safari, but its currently only working in firefox.
Anyone can that can help?
Here's the css that should work in al above browsers.
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
.case-image {
position:relative;
height:auto;
width:32%;
}
.case-image img {
position:absolute;
width: 100%;
height: auto;
left:0;
border: 3px solid #f8d206;
-moz-border-radius: 15px;
border-radius: 15px;
margin-left: -3px;
margin-right: -3px;
}
.case-image img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
.case-image img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
.case-image img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.case-image img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.case-image img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}

You need to include the vendor prefixes for the keyframes. See here for an example: http://jsfiddle.net/tjfogarty/Gzxkq/
#keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
#-webkit-keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
#-moz-keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
Etc...
You can also use something like this: http://leaverou.github.com/prefixfree/ to take care of it for you.

Resources