Responsive checkout progress bar animation not working - html

Question

This is a quite famous checkout bar / progress bar:
http://codepen.io/whqet/pen/EJgwb/
HTML:
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700' rel='stylesheet' type='text/css'>
<h1>Responsive Checkout Progress Bar</h1>
<! -- To test add 'active' class and 'visited' class to different li elements -->
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">
Login
</li>
<li class="previous visited">Shipping & Billing</li>
<li class="active">Shipping Options</li>
<li class="next">Review & Payment</li>
<li class="">Complete</li>
</ul>
</div>
CSS
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 50%;
}
}
h1 {
text-align: center;
font-family: 'PT Sans Caption', sans-serif;
font-weight: 400;
font-size: 30px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: 'PT Sans Caption', sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar {
margin: 0 20px;
}
ul.checkout-bar li {
color: #ccc;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background: #ddd;
border: 2px solid #FFF;
border-radius: 50%;
color: #fff;
font-size: 16px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 999;
}
ul.checkout-bar li.active {
color: #8bc53f;
font-weight: bold;
}
ul.checkout-bar li.active:before {
background: #8bc53f;
z-index: 99999;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #57aed1;
z-index: 99999;
}
ul.checkout-bar li.visited:before {
background: #57aed1;
z-index: 99999;
}
ul.checkout-bar li:nth-child(1):before {
content: "1";
}
ul.checkout-bar li:nth-child(2):before {
content: "2";
}
ul.checkout-bar li:nth-child(3):before {
content: "3";
}
ul.checkout-bar li:nth-child(4):before {
content: "4";
}
ul.checkout-bar li:nth-child(5):before {
content: "5";
}
ul.checkout-bar li:nth-child(6):before {
content: "6";
}
ul.checkout-bar a {
color: #57aed1;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #8bc53f;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
width: 100%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto;
}
ul.checkout-bar {
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
background-size: 35px 35px;
background-color: #EcEcEc;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
border-radius: 15px;
height: 15px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
border-radius: 15px;
content: " ";
height: 15px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0;
text-align: center;
width: 19%;
}
ul.checkout-bar li:before {
height: 45px;
left: 40%;
line-height: 45px;
position: absolute;
top: -65px;
width: 45px;
z-index: 99;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #57aed1;
background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
-webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
content: "";
height: 15px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 99;
}
}
The thing is, the animation defined under webkit frames does not work for me in chrome.
Is there a way to make it work? Maybe even crossbrowser?

Answer 1

animation syntax animation: myanimation 3s 0;
can fixed with animation: myanimation 3s 0s;
You can use only unprefix rules for animations and gradients. You may add also the prefixed version before unprefixed ones.
http://codepen.io/gc-nomade/pen/ZWZXqp