CSS：灰色の線にカラーを適用したときのアニメーション/翻訳効果

Question

簡単な質問：最初は緑色から黒色の線を描きたい。私は緑の色を適用するたびにすぐに行に適用されますbuti緑の色を左から右にゆっくりと適用する。どのように私はこの効果を得ることができます。

<div class="col-md-1 col-sm-1" id="dev_resend_request"> 
     <div class="settingiconblue"> 
      <div class="settingdivblue"> 
       <a href=""> 
        <span class="fa-stack fa-2x"> 
         <i class="fa fa-refresh" style="color:green"></i> 
        </span> 
       </a> 
      </div> 
      <p class="box-title">Resend Request</p> 
     </div> 
    </div> 

Answer 1

私はマウスhoverに同じ効果を行いました。コードの状況に応じて変更することも、jQueryと一緒に使用することもできます。

.line {width: 100%; height: 10px; background: black; position: relative;} 
 
.line:before {content: ""; background: green; width: 0px; height: 100%; transition: all 2s ease-in-out; position: absolute; top: 0px; left: 0px;} 
 
.line:hover:before {width: 100%;}

<div class="line"></div>

このコードはclickイベントに影響を行います...

$(document).ready(function() { 
 
     $('.line').on('click', function(){ 
 
     \t $('.line-green').css('width', '100%'); 
 
     }); 
 
});

.line {width: 100%; height: 10px; background: black; position: relative;} 
 
.line-green {position: absolute; top: 0px; left: 0px; height: 100%; width: 0px; background: green; transition: all 2s linear;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="line"> 
 
\t <div class="line-green"></div> 
 
</div>