带有嵌套类的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 -->

我的CSS样式

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

我无法让它工作。

在这种情况下，只有portfolio-image被设置动画，如果portfolio-image的css动画样式比tt-overlay和links的css动画样式更有效。

是否可以同时实现动画tt-overlay、links和portfolio-image？

Answer 1

您还没有为元素设置初始不透明度，每个动画元素都应该具有transition属性。+您的示例有点空，没有值。

这是一个灌篮器。我添加了一些值，所以您可以看到更改。它在萨斯，但没有太大区别。

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

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