ネストされたクラスによるCSSの遷移

Question

純粋なCSSを使用してアニメーションを作成しようとしています。 は、ここに私のHTML構造

<div class="portfolio-item col-xs-12 col-sm-4 col-md-3" data-groups='["all", "identety", "interface"]'> 
       <div class="portfolio-bg"> 
       <div class="portfolio"> 
        <div class="tt-overlay"></div> 
        <div class="links"> 
        <a class="image-link" href="images/works/portfolio-1.jpg"><i class="fa fa-search-plus"></i></a> 
        <a href="#"><i class="fa fa-link"></i></a>       
        </div><!-- /.links --> 
        <img class="portfolio-image" src="images/works/portfolio-1.jpg" alt="image"> 
        <div class="portfolio-info"> 
        <h3>Portfolio Title</h3> 
        </div><!-- /.portfolio-info --> 
       </div><!-- /.portfolio --> 
       </div><!-- /.portfolio-bg --> 
      </div><!-- /.portfolio-item --> 

そして

@imageHoverRotationAngle : 10deg; 
@imageHoverScaleValue : 1.5; 
@imageHoverAnimationTime : 0.5s; 

.portfolio:hover .tt-overlay, 
.portfolio:hover .links { 
    opacity: 1; 
    -webkit-transform: translate(0,0); 
    -moz-transform: translate(0,0); 
    -ms-transform: translate(0,0); 
    -o-transform: translate(0,0); 
    transform: translate(0,0); 
} 
.portfolio:hover .portfolio-image { 
     -webkit-transform:rotate(@imageHoverRotationAngle) scale(@imageHoverScaleValue); 
     -moz-transform:rotate(@imageHoverRotationAngle) scale(@imageHoverScaleValue); 
     -ms-transform:rotate(@imageHoverRotationAngle) scale(@imageHoverScaleValue); 
     -o-transform:rotate(@imageHoverRotationAngle) scale(@imageHoverScaleValue); 
     transform:rotate(@imageHoverRotationAngle) scale(@imageHoverScaleValue); 
} 
.portfolio .portfolio-image { 
     -webkit-transition:all @imageHoverAnimationTime ease-out; 
     -moz-transition:all @imageHoverAnimationTime ease-out; 
     -ms-transition:all @imageHoverAnimationTime ease-out; 
     -o-transition:all @imageHoverAnimationTime ease-out; 
     transition:all @imageHoverAnimationTime ease-out; 
} 

私はそれが働いて得ることができない私のCSSスタイルです。

portfolio-imageのCSSアニメーションスタイルがtt-overlayとlinksの場合は、portfolio-imageのみがアニメーション化されます。

tt-overlay,linksとportfolio-imageの両方のアニメーションを同時に達成できますか？

Answer 1

エレメントの初期不透明度を設定しておらず、アニメーション化された各エレメントには遷移プロパティが必要です。 +あなたの例は値なしで少し空です。

ここはプランナーです。いくつかの値を追加したので、変更を見ることができます。それはサスにありますが、大きな違いはありません。

.portfolio .tt-overlay, .portfolio .links { opacity: 0; } 

https://plnkr.co/edit/ll29vpEkifg68W0yvaal?p=preview