Hey there! I'm currently working on a form with multiple steps, where I animate the step number for each level of registration. The animation functions perfectly in Firefox, but unfortunately, it's not supported in Chrome and Safari due to an issue with the CSS property left. Below you can find my code:
This is the HTML section:
<div class="steps">
<p class="step1 active"><b>01</b></p>
<p class="step2"><b>02</b></p>
<p class="step3"><b>03</b></p>
<p class="step4"><b>04</b></p>
<p class="step5"><b>05</b></p>
</div>
This is the CSS part:
.steps{
width:100%;
height:2px;
margin:40px 0 0 0;
background:#f2b913;
float:left;
z-index:999999999999999999;
position:relative;
}
.steps p{
float:left;
width:60px;
position:absolute;
height:60px;
border-radius:50%;
text-align:center;
line-height:50px;
color:white;
background:#FFF;
padding:2px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
margin:-30px 0 0 0px;
cursor:pointer;
border:3px solid #f2b913;
font-size:20px;
}
.steps p b{
width:100%;
height:100%;
float:left;
border-radius:50%;
background:#f2b913;
}
.steps p:hover b, .steps p.active b{background:#019084;;}
.step1{left:0;}
.step2{left:60px;}
.step3{left:120px;}
.step4{left:180px;}
.step5{left:240px;}
Lastly, here is the jQuery part:
$(document).ready(function (){
$(".step1").css("left","auto").animate({"right":"0px"}, "slow");
$(".step2").animate({"left":"0px"}, "slow");
$(".step3").animate({"left":"60px"}, "slow");
$(".step4").animate({"left":"120px"}, "slow");
$(".step5").animate({"left":"180px"}, "slow");
});