2

モーダルボックスに偽のプログレスバーを作成しようとしています。訪問者をモーダルボックスに60秒間保持してから、消える必要があります。

これにアプローチする最良の方法は何でしょうか？

：hoverで何をしたいのかを説明しようとしました。

.progressbar{
    width:80%;
    height:16px;
    margin:0 auto 20px auto;
    padding:0px;

    background:#cfcfcf;
    border-width:1px;
    border-style:solid;
    border-color: #aaa #bbb #fff #bbb;    
    box-shadow:inset 0px 2px 3px #bbb;    
}

.progressbar,
.progressbar-inner{
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    -o-border-radius:4px;
}

.progressbar-inner{
    width:0%; /* Change to actual percentage */
    height:100%;
    background-size:18px 18px;
    background-color: #82ae40;    
    box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
}

.progressbar:hover .progressbar-inner{
    width:100%;   
    -webkit-transition: width 60s ease-in;  
    -moz-transition: width 60s ease-in; 
    -o-transition: width 60s ease-in; 
    transition: width 60s ease-in; 
}

.progressbar .progressbar-inner,
.progressbar:hover .progressbar-inner{
    -webkit-transition: width 60s ease-in;  
    -moz-transition: width 60s ease-in; 
    -o-transition: width 60s ease-in; 
    transition: width 60s ease-in; 
}
4

1 に答える 1

1

あなたはほとんどすべてをしました。これらのトランジションをアニメーションに変更して、キーフレームを作成するだけです。

.progressbar .progressbar-inner,
.progressbar:hover .progressbar-inner{
-webkit-animation: width 60s ease-in;  
-moz-animation: width 60s ease-in; 
-o-animation: width 60s ease-in; 
animation: width 60s ease-in; 
}



@-webkit-keyframes width {
0% {width:0%;}
100% {width:100%;}
}
@-moz-keyframes width {
0% {width:0%;}
100% {width:100%;}
}
@-o-keyframes width {
0% {width:0%;}
100% {width:100%;}
}
@keyframes width {
0% {width:0%;}
100% {width:100%;}
}

ここでは、プログレスバーを大きくするアニメーションを作成し、animation宣言を使用して要素にスタイルを設定しています。

いくつかの文献：
http ：//coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
https://developer.mozilla.org/en-US/docs/CSS/Tutorials / Using_CSS_animations

互換性チャート：http ：//caniuse.com/#feat=css-animation

ライブデモ： http： //jsfiddle.net/szXxe/

完了時に要素をフェードアウトするには、親要素（）に対して別のアニメーションを作成.progressbarし、フェードルールを使用してプログレスバーのアニメーションよりもドロップを長くする必要があります。そのようです：

.progressbar{
animation:fadeout 61s ease-in;
}



@keyframes fadeout {
0% {opacity:1;}
98% {opacity:1;}
100% {opacity:0;}
}

ライブデモ： http： //jsfiddle.net/43nuU/

于 2013-03-20T19:18:14.793 に答える