중첩 클래스가있는 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 -->

그리고

@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 두 애니메이션을 동시에 달성 할 수 있습니까?

출처

2016-07-30 ketazafor

당신은 다른 두 어떤'transition' 속성을 지정하지 않았습니다. 신청 해 보셨습니까? – Harry

예, 작동하지 않습니다. – ketazafor

아마도 ** 최소 ** 데모가 도움이 될 것 같습니까? –

요소에 초기 불투명도를 설정하지 않았으며 모든 애니메이션 요소에 전환 속성이 있어야합니다. + 당신의 예제는 값없이 약간 비어 있습니다.

여기에 큰 그림이 있습니다. 몇 가지 값을 추가 했으므로 변경 사항을 볼 수 있습니다. 그것은 Sass에 있지만 큰 차이는 없습니다.

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

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

출처

2016-07-30 08:00:06 Kindzoku

죄송합니다, 제로 불투명도가있는 클래스가 있습니다. 내가 말했듯이 이미지 애니메이션없이 작동합니다. – ketazafor

하지만 내 plunker가 작동하고 있으며 이는 귀하의 사례와 비슷합니다. 어떤 브라우저를 사용합니까? – Kindzoku

중첩 클래스가있는 CSS 전환

답변

관련 문제