HTMLターゲットオブジェクトに対してCSS3シマーアニメーションを実行するにはどうすればよいですか？

Question

ウェブページで、DIV、Aタグ、またはBUTTONのようなターゲットオブジェクト上にキーフレームを使用してCSS3のシマーアニメーションを行う方法はありますか？私はIE11のリリースよりも古いブラウザではなく、現在のブラウザにもっと関心を持っています。

光沢のあるアニメーションは、オブジェクトを横切る角度で輝くバーを置き、特定の方向に動かします。ページ上の何かに注意を引くのに便利です。これは、クリックして購入するようにオンライン広告のページを表示するのに適しています。

この場合、HTMLターゲットオブジェクトは、ページが読み込まれるときに通常のように表示されます。しかし、数秒後、このエフェクトを適用したい要素の目に見えるオーバーフロー境界の外側の隠れた空間の左側から、HTMLターゲットオブジェクトの境界線と境界線をオーバーフローするまで右に移動します遅れて、再び現れます。私が探しているアニメーションの種類はターゲットオブジェクトの背景にあり、明るい白を照らしていますが、ターゲットオブジェクトの上のどちらかにすることができます。ターゲットオブジェクトの背景を移動している間、それは1秒または1.5秒のように持続するように急速でなければなりません。

Answer 1

斜めのグラデーションの背景を作成し、キーフレームタイマーの左端から右端までスライドできます。あなたのCSSファイルに以下を追加し、HTML要素に "shimmer"クラスを追加します。私は、キーフレームのbackground-position-xプロパティの大きい番号と、CSSクラスのanimationプロパティのアニメーション速度（現在は8秒）の組み合わせを使用して、アニメーション速度で試しました。

@keyframes shimmerBackground { 
    0% {background-position:-5000px 0} 
    100% {background-position:5000px 0} 
} 

.shimmer 
{ 
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%); 
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); 
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%); 
background-repeat: repeat-y; 
background-position:-5000px 0; 
animation: shimmerBackground 8s linear infinite; 
}