CSSを使ってホバリングに異なるCSS3ホバートランジションを追加するには

Question

私の質問は、ホバーのためのトランジションよりも、ホバーオーバー時に異なるCSSバックグラウンドトランジションを試みることに特に関係します。

この質問はIan Lunn GitHub CSS3 Hover effects

See codepen here、または下記のビューのコードで利用できるCSS3ホバー効果を参照しています。 コード：

<style> 

.hvr-shutter-in-horizontal { 
    display: inline-block; 
    vertical-align: middle; 
    background: rgba(121,61,61, 0.7); 

    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.hvr-shutter-in-horizontal:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(77,79,79, 0.7); 

    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
    -webkit-transform-origin: 50%; 
    transform-origin: 50%; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-shutter-in-horizontal:hover, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:active { 
    color: white; 
} 
.hvr-shutter-in-horizontal:hover:before, .hvr-shutter-in-horizontal:focus:before, .hvr-shutter-in-horizontal:active:before { 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
} 
</style> 


<a href="#" class="hvr-shutter-in-horizontal">View our Training Workshops</a> 

次のCSSが生成すると私は同じマウス・アウトであるためには、このボタンのマウスアウトを変更したい：ここ

/* Sweep To Bottom */ 
.hvr-sweep-to-bottom { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.hvr-sweep-to-bottom:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #2098d1; 
    -webkit-transform: scaleY(0); 
    transform: scaleY(0); 
    -webkit-transform-origin: 50% 0; 
    transform-origin: 50% 0; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { 
    color: white; 
} 
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { 
    -webkit-transform: scaleY(1); 
    transform: scaleY(1); 
} 

Answer 1

がコンセプトのサンプルです、マウスオーバーの高さと、それが擬似要素

で更新さんのコメントに基づいて

アウトマウスの色をアニメーション化され10人の

div { 
 
    position: relative; 
 
    height: 30px; 
 
    background: red; 
 
    transition: background 1s; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    background: red; 
 
    transition: background 1s; 
 
} 
 

 
div:hover { 
 
    height: 120px; 
 
    background: blue; 
 
    transition: height 1s; 
 
} 
 
div:hover:after { 
 
    top: 100%; 
 
    background: yellow; 
 
    transition: top 1s; 
 
}

<div></div>