İlerleme çubuğu animasyonları nasıl yapılır? kitepharma.com/pipeline/ Bir sayfa kurulum ve CSS stil ama I'den çubukları oluşturmak başardı</p> <p>:

Question

Bana burada bunun gibi bazı aşamalı ilerleme çubukları olan başka site gösterdi bir müşterim var Hayatı için çalışmam, animasyonları işe yaramaz.

Birkaç CSS3 animasyonu uygulamaya çalıştım ancak işe yaramıyor gibi görünüyor.

Yanlış yaptığım şey hakkında herhangi bir fikir verebilir mi? Orijinal yapısında, Chrome müfettişimin bulamadığı bir dosyada bulunmayan başka bir kod görmüyorum. Barlar için

.section { 
display: block; 
    } 
.pipe02 { 
background: #CCC; 
position: relative; 
} 
.ready { 
-webkit-transition : width 2s ease; 
-moz-transition: width 2s ease; 
-o-transition: width 2s ease; 
transition: width 2s ease; 
transition-property: width; 
transition-duration: 2s; 
transition-timing-function: ease; 
transition-delay: initial; 
transition-timing-function: ease; 
height: 50px; 
line-height: 50px; 
background: rgb(47,96,173); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: -moz-linear-gradient(-45deg, rgba(47,96,173,1) 0%, rgba(125,185,232,1) 50%, rgba(125,185,232,1) 100%); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(47,96,173,1)), color-stop(50%,rgba(125,185,232,1)), color-stop(100%,rgba(125,185,232,1))); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: -webkit-linear-gradient(-45deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: -o-linear-gradient(-45deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: -ms-linear-gradient(-45deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
background: linear-gradient(135deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%); 
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%); 
background-position-x: initial; 
background-position-y: initial; 
background-size: initial; 
background-repeat-x: initial; 
background-repeat-y: initial; 
background-attachment: initial; 
background-origin: initial; 
background-clip: initial; 
background-color: initial; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f60ad', endColorstr='#7db9e8',GradientType=1); 
    } 
@-webkit-keyframes move { 
    0% {background-position: 0px 0px, 0 0, 0 0} 
    100% {background-position: -100px 0px, 0 0, 0 0} 
} 
ul.pipelabel { 
position: absolute; 
width: 100%; 
left: 0; 
} 
ul.pipelabel li:nth-child(-n+2) { 
border-right: solid 1px #FFF; 
} 
ul.pipelabel li { 
float: left; 
width: 33%; 
padding: 0; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
margin: 0 auto; 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 
text-align: center; 
list-style-type: none; 
color: #fff; 
} 

Kodu:

<section class="avia_codeblock_section avia_code_block_0"> 
<div class="nectar-progress-bar"> 
<div class="pipe02"> 
<div style="width: 40%;" class="ready bar-wrap"> 
<ul class="pipelabel"> 
<li>Discovery</li> 
<li>Pre Test</li> 
<li>PHASE 1</li> 
</ul> 
</div> 
</div> 
</div> 
</section> 

bana herhangi bir öneri verebilir herkese teşekkür ederiz

İşte kullanıyorum benim CSS stil olduğunu.

Answer 1

Bu kodu bu kodu kullanarak elde edebilirsiniz. Bu animasyon yapmak için en temiz yol olmayabilir ama bu kesinlikle ben örnekte var gibi çubuğun üstünde metin içeriğini koyamazsınız Bu cevap ile

<html> 
<head></head> 
<style> 
.container{ 
    position: absolute; 
    top: 0; 
    width: 400px; 
    height: 80px; 
    background:linear-gradient(95deg, rgba(47,96,173,1) 0%, rgba(125,185,232,1) 25%, rgba(125,185,232,1) 100%); 
-webkit-animation :move 5s forwards;  

} 
@-webkit-keyframes move{ 
    0%{ width: 400px; } 
    100%{width: 700px; 
    } 
} 
.two{ 
    width: 400px; 
    height: 80px; 
    margin-left: 400px; 
    position: absolute; 
    top: 0; 
    background-color: #c0c0c0; 
-webkit-animation :moveTwo 5s forwards; 

} 
@-webkit-keyframes moveTwo{ 
    0%{ margin-left: 400px; 
     width: 400px; } 
    100%{ margin-left: 700px; 
     width: 100px; 
    } 
} 

</style> 
<body> 
     <div class="container"> 

     </div> 
     <div class="two"></div> 
</body>