CSS-Übergang mit verschachtelten Klassen

Question

Ich versuche, Animation mit reinem CSS zu erstellen. Hier ist meine HTML-Struktur

<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 --> 

Und mein CSS-Stil

@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; 
} 

Ich kann es nicht bekommen zu arbeiten.

In diesem Fall wird nur portfolio-image animiert, wenn CSS-Animation Stile für portfolio-image als tt-overlay und links funktioniert.

Ist es möglich, beide Animationen tt-overlay, links und portfolio-image gleichzeitig zu erreichen?

Answer 1

Sie haben die anfängliche Deckkraft für Ihre Elemente nicht festgelegt und jedes animierte Element sollte eine Übergangseigenschaft haben. + Ihr Beispiel ist ein bisschen leer ohne Werte.

Hier ist ein Plünderer. Ich habe einige Werte hinzugefügt, damit Sie Änderungen sehen können. Es ist in Sass, aber kein großer Unterschied.

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

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