순환 애니메이션을 중지 할 수 없습니다.

Question

연속해서 세 개의 이미지가 있습니다. 마우스가 움직일 때까지 마우스를 확대하고 싶습니다. 이 종류의 작품은 내 jsfiddle에 있지만, 보시다시피 애니메이션은 확대 한 후에 멈추지 않습니다. 이 문제의 다른 스레드는 반복 횟수를 설정하고 옵션을 전달합니다. 내가 찾을 수있는 유일한 다른 솔루션은 그것을 제어하는 ​​자바 스크립트를 사용했다. 그냥 CSS로 할 수있는 방법이 있나요? 여기 내 코드는 다음과 같습니다

는

<style> 

    #set2 {margin-left:40px; display:inline-block} 
    #set2:hover { 
     -webkit-animation: enlarge 5s; 
     animation: enlarge 5s; 
     animation-fill-mode: forwards; 
     animation-iteration-count: 1; 
    } 
    @-webkit-keyframes enlarge { 

     25% { 
     -webkit-transform: scale(1.5); 
     transform: scale(1.5); 
     } 
    } 

    </style> 

    <div class="banner_set"> 
     <ul class="nav"> 
     <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li> 
     <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li> 
     <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li> 
     </ul> 
    </div> 

Answer 1

당신은 애니메이션 방식보다는 전환을 사용하는 특별한 이유가 있나요 ?

원하는 동작은 두 개의 애니메이션 상태 사이를 전환하는 것이므로 어쩌면 전환이 더 쉽게 접근 할 수 있습니다.

Using your example code :

.nav {margin:0; padding-top:5px;overflow:hidden} 
 
.nav-items {border:1px solid black} 
 
.nav-items {margin-left:0px; display:inline-block; overflow: hidden;} 
 
.nav-items:hover img { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 500ms ease-in; 
 
    -webkit-transform: scale(2.1); 
 
    -ms-transition: all 500ms ease-in; 
 
    -ms-transform: scale(2.1); 
 
    -moz-transition: all 500ms ease-in; 
 
    -moz-transform: scale(2.1); 
 
    transition: all 500ms ease-in; 
 
    transform: scale(2.1); 
 
} 
 
.nav-items img { 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
}

<div class="banner_set"> 
 
    
 
    <ul class="nav"> 
 
    <li id="0" class="nav-items small_0"><a href="example.com"><img src="http://placehold.it/200x200"></a></li> 
 
    <li id="1" class="nav-items small_1"><a href="example.com"><img src="http://placehold.it/200x200"></a></li> 
 
    <li id="2" class="nav-items small_2"><a href="example.com"><img src="http://placehold.it/200x200"></a></li> 
 
    </ul> 
 
    </div> 
 

Answer 2

25%에서 귀하의 키 프레임 세트는 요소는 다음 말에 확장하지 애니메이션을 통해 길의 1/4을 확장 할 것을 의미합니다. 매끄러운 규모를 원한다면 그게 전부입니다. 100%을 사용하십시오 (그리고 기간을 줄이십시오!).

fiddle가 업데이트되었습니다. 이상한 이미지 스타일링으로 인해 이미지를 볼 수 있습니다.

#set2 {margin-left:40px; display:inline-block} 
 
#set2:hover { 
 
    -webkit-animation: enlarge 2s; 
 
    animation: enlarge 2s 1 forwards; 
 
} 
 
@-webkit-keyframes enlarge { 
 
    100% { 
 
    -webkit-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
    
 
} 
 

 
img { 
 
    min-height: 30px; 
 
    min-width: 30px; 
 
    border: 3px solid red; 
 
}

<div class="banner_set"> 
 
    <ul class="nav"> 
 
    <li id="set2" class="nav-items"><a href="example.com"><img src="example1.jpg"></a></li> 
 
    <li id="set2" class="nav-items"><a href="example.com"><img src="example2.jpg"></a></li> 
 
    <li id="set2" class="nav-items"><a href="example.com"><img src="example3.jpg"></a></li> 
 
    </ul> 
 
</div>