css - Progressive CSS3 animation -
i need make progressive bar similar this: https://dribbble.com/shots/1664914-onboarding-progress-steps?list=searches&tag=onboarding&offset=31
i have tried till point: codepen link
css
body{ background-color: #34495e; } .mail{ border: 1px solid #d35400; border-radius: 50%; border-width: 50%; float: left; background-color: #d35400; color: white; } .navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: #16a085; } .navbar-inverse{ background-color: #1abc9c; }.icon-bar { width: 90px; background-color: #555; } .icon-bar { display: block; text-align: center; padding: 16px; transition: 0.3s ease; color: white; font-size: 36px; background-color: #34495e; } .same{ float: left; font-size: 32px; } .icon-bar a:hover { color: #1abc9c; } .active { color: #1abc9c !important; } .header{ color: white; background-color: #34495e; margin-left: 2%; } .fs1 { font-size: 32px; } .container{ width: 100%; } .progressionbar li{ list-style-type: none; width: 33.33%; float: left; position: relative; } .progressionbar li >span{ width: 20%; height:30%; border:2px solid transparent; display: block; text-align: center; margin: 0 auto 10px auto; border-radius: 50%; padding: 5%; background-color: white; box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0; } .progressionbar li:after{ content: ''; position: absolute; width: 100%; height: 6px; background-color: #9b59b6; top: 35%; left: -50%; z-index: -1; } .first{ animation-name: example; animation-duration: 10s; animation-iteration-count: infinite; animation-direction: alternate; animation-delay:2s; } .first{ animation-duration: 2s; animation-name: example; animation-iteration-count: 1; } .second{ animation-name: example; animation-duration: 10s; animation-iteration-count: infinite; animation-delay: 6s; } .second{ animation-duration: 2s; animation-name: example; animation-iteration-count: 1; } .third{ animation-name: example; animation-duration: 10s; animation-iteration-count: infinite; animation-delay: 8s; } .third{ animation-duration: 2s; animation-name: example; animation-iteration-count: 1; } @-webkit-keyframes example { {background-color: white;} {background-color: #9b59b6;} 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } .progressionbar li:first-child:after{ content: none; left: -50%; } html
<html><body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <a style="background-color: #34495e" class="navbar-brand active" href="#"><span class="icon-brand same"></span></a> <ul class="nav navbar-nav navbar-right"> <li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">rupam verma<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="new.html" target="_blank"><h1 class="mail">r</h1><h5>rupam varma</h5><br><h5 style="float: right;"><a href="https://plus.google.com/u/0/105904544623478465796"> mahi.roops@gmail.com</a></h5></li> </ul> </div> </nav></a></li></ul></li></ul></div></nav> <div class="row"> <div class="col-md-12"> <h3 class="header">menu</h3></div> <div class="col-md-1"> <div class="icon-bar"> <a class="active" href="#"><span class="icon-circle"></span></a> <a href="#"><span class="icon-toggle-off"></span></i></a> <a href="#"><span class="icon-checklist"></span></a></div></div> <div class="col-md-11"> <div class="progressionbar"> <ul class=""> <div class="fs1"> <li><span class="icon-gift first"></span><h3 style="text-align: center">gift</h3></li> <li><span class="icon-truck2 second"> </span><h3 style="text-align: center;"> car</h3></li> <li> <span class="icon-profile-male third"></span><h3 style="text-align: center;"> user</h3></li> </div> </ul> </div></div></div></div> </body> </html> i don't know how achieve such thing since has done through css3 , no js. timer , zoom-in zoom-out issue. also, not repeating.
any appreciated, thanks.
ok answer simple delays.
for delays:
you can see fiddle here showing solution.
css3 got no delay between animation loops, first one. quick search on css trick show how that.
the idea create more keyframes make delay.
@-webkit-keyframes example3 { 0% { transform: scale(1); opacity: 1; background-color: white; } 59% { transform: scale(1); opacity: 1; background-color: white; } 60% { transform: scale(0.1); opacity: 0; background-color: white; } 72% { transform: scale(1.2); opacity: 1; } 80% { transform: scale(1); background-color: #9b59b6; } 100% { transform: scale(1); background-color: #9b59b6; } } here code animation during 10 seconds. can notice nothing happens 6 first seconds because want delay of 6 seconds each loop (third button case).
after that, animation during time wnat, here 2secondes, ie 20%, , let final state untill 100%.
the 59% - 60% weird stuff happends because want abrupt change @ start of animation. it's not necessary.
consequently, problem is basic math problem afterall, calculate when have wait each animation etc.. did 3 buttons can see result.
for progressive bar :
the strategy should same before. create bar background color #9b59b6, , make width change percentage, soemtimes waiting 2sec @ width "button" animation going on before continuing way, , work done!
in case, decided make progressive bar after, , not absolute one, in 2 parts etc etc..
what suggest create absolute positionned 1 right background color recover ":after" ones, makes normal width 0%, , make grow animation explained.
why didn't ? have strategy , lazy position perfectly. , it's work @ end.. better if practice on progress bar rather copy paste code.
Comments
Post a Comment