如何做进度条动画？

Question

我有一个客户端，给我看，有一些多级进度条像这样一个在这里另一个站点：kitepharma.com/pipeline/

我有一个页面设置，并能够从CSS样式，但我建立了吧不能为我的生活得到动画工作。

我试图应用一些其他的CSS3动画，但我似乎无法让它工作。

任何人都可以提供任何见解我做错了什么？我没有看到任何其他原始结构的代码，除非它在Chrome检查器找不到的文件中。

下面是我用我的CSS样式：

.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; 
} 

代码栏：

<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> 

谢谢你给任何人，可以给我任何建议。

Answer 1

您可以使用此代码实现该动画。这可能不是做动画的干净的方式，但是这肯定工程

<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>