【发布时间】：2016-12-04 20:49:25
【问题描述】：
我正在尝试使用纯 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 有效。
是否可以同时实现tt-overlay,links和portfolio-image这两个动画？
【问题讨论】：
-
您尚未将任何
transition属性分配给其他两个。你试过应用它吗？ -
是的，它不起作用
-
或许minimal 演示在这里可能会有所帮助？
标签： html css animation css-transitions