使用嵌套类的CSS转换

我正尝试使用纯CSS创建动画。这里是我的HTML结构使用嵌套类的CSS转换

<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正在动画，如果css动画样式为portfolio-image将比tt-overlay和links有效。

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

来源

2016-07-30 ketazafor

你还没有指定任何'transition'属性其他两个。你尝试过应用它吗？ – Harry

是的，它不起作用 – ketazafor

也许**最小**演示可能会有帮助吗？ –

您尚未为您的元素设置初始不透明度，并且每个动画元素都应具有过渡属性。 +你的例子有点空，没有值。

这是一个蹲点。我已经添加了一些值，因此您可以看到更改。它在萨斯，但没有太大的区别。

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

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

来源

2016-07-30 08:00:06 Kindzoku

对不起，我有这样的零级不透明类。正如我所说的那样，它没有图像动画效果 – ketazafor

但我的运动员正在工作，它和你的情况很相似。你使用什么浏览器？ – Kindzoku

使用嵌套类的CSS转换

回答

相关问题