CSSトランジションの背景グラデーション（ハック）

背景位置/トランジッションのハックを見つけようとしていますhereとhereは、ホバーのパネルの背景のトランジションをアニメーション化しています...私は何をしているのか分かりません間違っているが、それは私のために働いていない。CSSトランジションの背景グラデーション（ハック）

はここ（ブートストラップV3を使用して）私がこれまで持って関連するコードです

HTML：

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span> 
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo 
    </div> 
</div>

SCSS：私もjsfiddle hereを設定

.panel, 
.panel-default { 
    border-radius: 3rem; 
    cursor: pointer; 
    cursor: hand; 
    overflow: hidden; 
} 

.panel-body { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f4f4)); 
    background-image: -webkit-linear-gradient(#fff, #f4f4f4); 
    background-image: -moz-linear-gradient(#fff, #f4f4f4); 
    background-image: -o-linear-gradient(#fff, #f4f4f4); 
    background-image: linear-gradient(#fff, #f4f4f4); 
    -webkit-background-size: auto 200%; 
    background-size: auto 200%; 
    background-position: 0 100%; 
    font-size: medium; 
    padding-left: 56px; 
    padding-left: 3.5rem; 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    transition: all 1s linear; 

    .glyphicon-link { 
    padding-right: 56px; 
    padding-right: 3.5rem; 
    } 
} 

.panel-body:hover { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#093479)); 
    background-image: -webkit-linear-gradient(#337ab7, #093479); 
    background-image: -moz-linear-gradient(#337ab7, #093479); 
    background-image: -o-linear-gradient(#337ab7, #093479); 
    background-image: linear-gradient(#337ab7, #093479); 
    background-position: 0 0; 
    color: white; 
    padding-left: 88px; 
    padding-left: 5.5rem; 
} 

.panel-body:active { 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547)); 
    background-image: -webkit-linear-gradient(#1eb759, #4f8547); 
    background-image: -moz-linear-gradient(#1eb759, #4f8547); 
    background-image: -o-linear-gradient(#1eb759, #4f8547); 
    background-image: linear-gradient(#1eb759, #4f8547); 
}

：

出典

2017-07-04 DjH

ないあなたは遷移が動作するようにする方法を実際に確認してください。これは一般的な考え方です... https://jsfiddle.net/6rusdruy/4/多分これは好きですか？ https://jsfiddle.net/6rusdruy/5/ –

ありがとうございます。うん、私はフェードイン/アウトに見えるようにしたいと思うかもしれません...多分、私は不透明または何かでこれを考え直す必要があります... – DjH

NP。私が答えとしてそれを提出するか、それを使って他の何かをしたいと思っているかどうかは分かります。私はより勾配のアイディアの移行でスタブでコメントを編集しました –

新しいbackground-imageを:hoverに設定しています。background-positionを:hoverに変更するだけです。

.panel, 
 
.panel-default { 
 
    border-radius: 3rem; 
 
    cursor: pointer; 
 
    cursor: hand; 
 
    overflow: hidden; 
 
} 
 

 
.panel-body { 
 
    background-image: -webkit-linear-gradient(top, #fff 0%, #f4f4f4 25%, #337ab7 75%, #093479 100%); 
 
    background-image: linear-gradient(to bottom, #fff 0%, #f4f4f4 25%, #337ab7 75%, #093479 100%); 
 
    background-size: auto 400%; 
 
    background-position: 0 0; 
 
    font-size: medium; 
 
    padding-left: 56px; 
 
    padding-left: 3.5rem; 
 
    -webkit-transition: all 1s linear; 
 
    transition: all 1s linear; 
 
} 
 
.panel-body .glyphicon-link { 
 
    padding-right: 56px; 
 
    padding-right: 3.5rem; 
 
} 
 

 
.panel-body:hover { 
 
    background-position: 0 100%; 
 
    color: white; 
 
    padding-left: 88px; 
 
    padding-left: 5.5rem; 
 
} 
 

 
.panel-body:active { 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1eb759), to(#4f8547)); 
 
    background-image: -webkit-linear-gradient(#1eb759, #4f8547); 
 
    background-image: linear-gradient(#1eb759, #4f8547); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
    <span class="glyphicon glyphicon-link" aria-hidden="true"></span> 
 
    <strong>Portfolio Name: &nbsp;&nbsp;&nbsp;</strong>Foo 
 
    </div> 
 
</div>

出典

2017-07-04 20:30:50

CSSトランジションの背景グラデーション（ハック）

答えて

関連する問題