CSSアニメーションと一緒にホバー上で背景色が変化しない

Question

私はthis pageで効果を達成しようとしていました（一部のタッチスクリーンでは動作しません！）テキストが上がり、背景が暗くなりますが私はCSSアニメーションを追加したときに背景の変更を行うことはできません。削除すると背景色の効果がうまく機能します。

また、元のページのように背景画像の高さを100％にしたいと考えています。

私はそれを動作させる方法はありますか？

#tech-specs-container-desk { 
 
display: inline-block; 
 
position: relative; 
 
z-index : 1; 
 
width: 100%; 
 
height: 581px; 
 
background-image: url('https://i.stack.imgur.com/mQF3B.jpg'); 
 
background-size: 100vw 100%; 
 
} 
 
.specs:hover{ 
 
font-size: 25pt; 
 
line-height: 30pt; 
 
position: relative; 
 
background: rgba(0, 0, 0, 0.2) 
 
    -webkit-animation: moving-spec 3s forwards; 
 
animation: moving-spec 3s forwards; 
 
} 
 
@-webkit-keyframes moving-spec { 
 
    from {bottom: 0px;} 
 
    to {bottom: 100px;} 
 
} 
 

 
@keyframes moving-spec { 
 
    from {bottom: 0px;} 
 
    to {bottom: 100px;} 
 
} 
 
.specs{ 
 
width: 18%; 
 
display: inline-block; 
 
font-family:'Futura Std Light'; 
 
font-size: 15pt; 
 
line-height: 20pt; 
 
color: #666666; 
 
text-align: center; 
 
padding: 10px 20px; 
 
border-right: 0.5px solid #666666; 
 
vertical-align: text-top; 
 
} 
 
#inner-specs-container-desk { 
 
display: inline-block; 
 
position: relative;  
 
width: 100%; 
 
top:270px; 
 
}

<div id="tech-specs-container-desk"> 
 
    <div id="inner-specs-container-desk"> 
 
     <div id="spec-one" class="specs"> Integración con sistemas de salud bajo protocolo HL7 </div> 
 
     <div id="spec-two" class="specs"> Funcionamiento en tiempo real</div> 
 
     <div id="spec-three" class="specs">Almacenamiento en CLOUD y escalable </div> 
 
     <div id="spec-four" class="specs">Protocolos de seguridad de la información </div> 
 
    </div> 
 
    </div>

Background img

Answer 1

私は、CSSを変更するアニメーション+背景の前にバックグラウンドを使用し、それが適切に定義されました。ブラウザで背景+アニメーションが無効です。

編集：以下の回答は正しいです。 didntは欠けている記号を見ます。

#tech-specs-container-desk { 
 
display: inline-block; 
 
position: relative; 
 
z-index : 1; 
 
width: 100%; 
 
height: 581px; 
 
background-image: url('https://i.stack.imgur.com/mQF3B.jpg'); 
 
background-size: 100vw 100%; 
 
} 
 
.specs:hover{ 
 
font-size: 25pt; 
 
line-height: 30pt; 
 
position: relative; 
 
background: rgba(0, 0, 0, 0.2); 
 
background: rgba(0, 0, 0, 0.2) 
 
    -webkit-animation: moving-spec 3s forwards; 
 
animation: moving-spec 3s forwards; 
 
z-index: 9999; 
 
} 
 
@-webkit-keyframes moving-spec { 
 
    from {bottom: 0px;} 
 
    to {bottom: 100px;} 
 
} 
 

 
@keyframes moving-spec { 
 
    from {bottom: 0px;} 
 
    to {bottom: 100px;} 
 
} 
 
.specs{ 
 
width: 18%; 
 
display: inline-block; 
 
font-family:'Futura Std Light'; 
 
font-size: 15pt; 
 
line-height: 20pt; 
 
color: #666666; 
 
text-align: center; 
 
padding: 10px 20px; 
 
border-right: 0.5px solid #666666; 
 
vertical-align: text-top; 
 
} 
 
#inner-specs-container-desk { 
 
display: inline-block; 
 
position: relative;  
 
width: 100%; 
 
top:270px; 
 
}

<div id="tech-specs-container-desk"> 
 
    <div id="inner-specs-container-desk"> 
 
     <div id="spec-one" class="specs"> Integración con sistemas de salud bajo protocolo HL7 </div> 
 
     <div id="spec-two" class="specs"> Funcionamiento en tiempo real</div> 
 
     <div id="spec-three" class="specs">Almacenamiento en CLOUD y escalable </div> 
 
     <div id="spec-four" class="specs">Protocolos de seguridad de la información </div> 
 
    </div> 
 
    </div>

Answer 2

あなただけのbackground: rgba(0, 0, 0, 0.2)