CSS遷移の背景色はホバーなし

Question

time-boxというdivがあります。場合によっては、countdownという追加のクラスも追加します。 countdownが追加されている場合は、CSSトランジションエフェクトを使用して、背景が60秒間に赤色に変わるようにしたいと考えています。言い換えれば、赤い背景を通過する各秒は、最終的にすべての緑の背景がなくなるまで少し広がります。

私はここに同様の記事を発見したが、それらはすべてここhover

に関連しているようだが、私はあなたが望む結果を得るために「シンプル」な方法を知りませんフィドル

https://jsfiddle.net/e2vbheew/

Answer 1

...

.time-box { 
 
    height: 27px; 
 
    text-align: center; 
 
    background-color: #25E57B; 
 
    font-size: 2rem; 
 
    padding: 0px; 
 
    font-size: 1.2rem; 
 
    text-transform: uppercase; 
 
    padding: 3px 5px 3px 5px; 
 
    font-weight: 600; 
 
    height: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.time-box.countdown:before { 
 
    content: ''; 
 
    width: 0; 
 
    height: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: red; 
 
    animation: countdown 60s forwards; 
 
    z-index: -1; 
 
} 
 

 
@keyframes countdown { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
}

<div class="time-box"> 
 
    12:00 
 
</div> 
 

 
<div class="time-box countdown"> 
 
    <span>12:00</span> 
 
</div>

Answer 2

です左から右に行くのですが、前後の擬似要素を使って作成する方法があります。ここでの重要な点は、新しい背景が横断するa：beforeのpseudoelementと、コンテンツを複製してbeforeの上に置くための：after pseudoelementを作成することです。これはまだ表示されています。これは、擬似要素の '内容'で参照できるように、divの属性にコンテンツを置くことが必要でした。内部にもっと複雑なコンテンツがある場合は、：afterを使用しないで、おそらく内部コンテンツの位置とZインデックスを渡して、それが見えるようにすることができます。ここでは結果のCSSに

.time-box { 
    height: 27px;         
    text-align: center; 
    background-color: #25E57B;  
    font-size:2rem; 
    padding:0px; 
    font-size:1.2rem; 
    text-transform:uppercase; 
    padding:3px 5px 3px 5px;; 
    font-weight:600; 
    height:auto; 
    position: relative; 
} 
.time-box:before { 
    background-color: red; 
    position: absolute; 
    left:0; 
    top: 0; 
    height: 100%; 
    width: 0; 
    content: " "; 
    transition: width 60s ease; 
} 
.countdown:after { 
    content: attr(data-content); 
    width: 100%; 
    text-align: center; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: center; 
    z-index: 1; 
} 
.countdown:before { 
    width:100%; 
} 

と更新されたバイオリンです：https://jsfiddle.net/tunzwqd7/2/

Answer 3

あなたが60で割り切れる100％を作るために最大ともう少し数学を追加する必要がありますが、これは正しい軌道に乗ってあなたを取得する必要があります。現在、このコードは1秒ごとに更新され、繰り返しごとにプログレスバーの幅に1％を追加します。

CSS animationプロパティを使用して

var time = 0; 
 
var bar = document.querySelector('.countdown .progress-bar'); 
 

 
window.setInterval(function(){ 
 
\t time++; 
 
    bar.style.width = time+"%"; 
 
}, 1000);

.time-box { 
 
\t height: 27px; \t \t \t \t \t \t \t \t \t 
 
\t text-align: center; 
 
\t background-color: #25E57B; \t 
 
\t font-size:2rem; 
 
\t padding:0px; 
 
\t font-size:1.2rem; 
 
\t text-transform:uppercase; 
 
\t padding:3px 5px 3px 5px;; 
 
\t font-weight:600; 
 
\t height:auto; 
 
    position: relative; 
 
} 
 

 
.progress-bar { 
 
    display: none; 
 
} 
 

 
.countdown .progress-bar { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: red; 
 
    width: 0%; 
 
    z-index: 1; 
 
    transition: all 0.3s ease-out; 
 
} 
 

 
.countdown p { 
 
    z-index: 2; 
 
    position: relative; 
 
}

<div class="time-box"> 
 
    <p>12:00</p> 
 
    <div class="progress-bar"></div> 
 
</div> 
 

 
<div class="time-box countdown"> 
 
    <p>12:00</p> 
 
    <div class="progress-bar"></div> 
 
</div>