アニメーションの色が変化するアンダーライン効果

Question

私はこれを理解しようとしましたが、彼がどのようなコードを使用したのか理解できませんでした。

http://riccardozanutta.com/

私は彼が右上隅に与える影響に似たものを再作成します。アニメーション化されたスライディングバーが現れて消えていくと色が変わる場所。

私は確かにhttp://bradsknutson.com/blog/css-sliding-underline/のコードがこれの基礎であると確信しています。私はスライドバーを使って色を変えることができましたが、滑らかではなく、色の変化も急です。

私の試み： http://codepen.io/Dingerzat/pen/mOmzVp

/* CSS */ 

.sliding-u-l-r-l { 
    display: inline-block; 
    text-decoration:none; 
    color: #000000; 
    position: relative; 
    padding-bottom: 3px; 
} 
.sliding-u-l-r-l:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    transition: width 0s ease, background .5s ease; 
} 
.sliding-u-l-r-l:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    background: blue; 
    transition: width .5s ease; 
} 
.sliding-u-l-r-l:hover:before { 
    width: 100%; 
    background: red; 
    transition: width .5s ease; 
} 
.sliding-u-l-r-l:hover:after { 
    width: 100%; 
    background: transparent; 
    transition: all 0s ease; 
} 

。

<!-- HTML --> 
    <a class=sliding-u-l-r-l href="http://codepen.io">A link that is and never is</a> 

Answer 1

あなたはこのような何かを探している：

HTML

<a class=sliding-u-l-r-l href="http://codepen.io">A link that is and never is</a> 

CSS

.sliding-u-l-r-l { 
    display: inline-block; 
    text-decoration:none; 
    color: #000000; 
    position: relative; 
    padding-bottom: 3px; 
} 
.sliding-u-l-r-l:before { 
    /* 
     We moved the background color in here so that we remain 
     visible after the link has been unhovered. 
    */ 
    background: red; 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    /* 
     Take 1 second for the red underline's change in width to take affect. 
     We don't want the background to fade out, so we removed the 
     background transition. 
     */ 
    transition: width 1s ease; 
} 
.sliding-u-l-r-l:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    background: blue; 
    /* 
     Change 1s to whatever length of time you want the blue underline to take. 
     */ 
    transition: width 1s ease; 
    /* 
     Don't do our transition until the red underline has finished theirs. 
     This should be at least as long as the length of the red transition. 
    */ 
    transition-delay: 1s; 
    /* 
     Make sure the blue underline shows underneath the red one. 
    */ 
    z-index: -1; 
} 
.sliding-u-l-r-l:hover:before { 
    /* 
     We don't need a background color in here anymore. 
    */ 
    width: 100%; 
    transition: width .5s ease; 
} 
.sliding-u-l-r-l:hover:after { 
    width: 100%; 
    background: transparent; 
    transition: all 0s ease; 
} 

---

その他：

PS：ご質問があるか、任意の追加の明確化が必要な場合は、単に尋ねます。

PPS：Here's a link to an example.

P^3S： CSSがコメントしています。何かが意味をなさないか、何かを理解できない場合は、CSSのコメントに説明があります。