アニメーション動的テキストのCSS

Question

私はこのリンクにホバーを追加する必要があります。リンクワードの「幅」を変更する必要があります。翻訳アニメーションの値を動的に変更する方法はありますか？

.link { 
 
    text-decoration: none; 
 
    padding-left: 15px; 
 
    position: relative; 
 
    transition: 1s; 
 
    &:hover { 
 
    padding-left: 0; 
 
    .link--decoration { 
 
     animation: in 1s ease both; 
 
    } 
 
    } 
 
} 
 

 
.link--decoration { 
 
    animation: out 1s ease both; 
 
    left: 0; 
 
    position: absolute; 
 
} 
 

 
@keyframes in { 
 
    to { 
 
    transform: translate(calc(100% + 75px), 0); 
 
    } 
 
} 
 

 
@keyframes out { 
 
    from { 
 
    transform: translate(calc(100% + 75px), 0); 
 
    } 
 
    to { 
 
    transform: translate(0, 0); 
 
    } 
 
}

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Read Article</span></a></p> 
 

 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Hours</span></a></p> 
 

 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Localization</span></a></p>

https://codepen.io/serrazina/pen/zzEaLE

Answer 1

これを解決するための私が見る2つのアプローチがあります。最初はleftを使用して装飾をアニメートします。このように：

.link { 
 
    text-decoration: none; 
 
    padding-left: 15px; 
 
    position: relative; 
 
    transition: 1s; 
 
} 
 

 
.link:hover { 
 
    padding-left: 0; 
 
} 
 

 
.link:hover .link--decoration { 
 
    animation: in 1s ease both; 
 
} 
 

 
.link--decoration { 
 
    animation: out 1s ease both; 
 
    left: 0; 
 
    position: absolute; 
 
} 
 

 
@keyframes in { 
 
    to { 
 
    left: calc(100% + 5px); 
 
    } 
 
} 
 

 
@keyframes out { 
 
    from { 
 
    left: calc(100% + 5px); 
 
    } 
 
    to { 
 
    left: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Read Article</span></a></p> 
 

 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Hours</span></a></p> 
 

 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Localization</span></a></p>

第二の方法は、ハードウェアアクセラレーションを活用するtransformを使用します。この方法とあなたの違いは、translateが要素の幅に基づいているため、装飾にwidth: 100%を追加することでした。あなたの例では、transform: translateX(100%)は装飾要素の幅の100％で、幅は約20pxでした。下のデモでは、要素の親要素の幅を100％にしました。したがって、transform: translateX(100%)は、それを親要素の右側に移動します。

.link { 
 
    text-decoration: none; 
 
    padding-left: 15px; 
 
    position: relative; 
 
    transition: 1s; 
 
} 
 

 
.link:hover { 
 
    padding-left: 0; 
 
} 
 

 
.link:hover .link--decoration { 
 
    animation: in 1s ease both; 
 
} 
 

 
.link--decoration { 
 
    animation: out 1s ease both; 
 
    left: 0; 
 
    width: 100%; 
 
    position: absolute; 
 
} 
 

 
@keyframes in { 
 
    to { 
 
    transform: translateX(calc(100% + 5px)); 
 
    } 
 
} 
 

 
@keyframes out { 
 
    from { 
 
    transform: translateX(calc(100% + 5px)); 
 
    } 
 
    to { 
 
    transform: translateX(0); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Read Article</span></a></p> 
 

 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Hours</span></a></p> 
 

 
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Localization</span></a></p>