하나의 오브젝트에 두 개의 애니메이션 추가 [이미지로]

두 개의 애니메이션을 이미지에 표시하고 페이지로드시 바운스하고 두 번째 애니메이션이 튀어 오면 흔들림을 시작해야합니다. 두 개의 서로 다른 이미지에 대해이 작업을 수행했지만이 두 이미지를 하나로 묶을 때 하나의 애니메이션 만 작동합니다. 다른 애니메이션 효과가 덮어 쓰여지고 있습니다.하나의 오브젝트에 두 개의 애니메이션 추가 [이미지로]

swinging 및 bounce에 대한 JSfiddle을 만들었습니다.

어떤 도움

ul { list-style-type:none;} 
 
@-webkit-keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
} 
 
@keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg); 
 
       transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
} 
 
.swingimage { 
 
    -webkit-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite; 
 
    animation: swinging 3.5s ease-in-out forwards infinite; 
 
}

<ul class="nav navbar-nav pull-right"> 
 
    <li class=""> 
 
    <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage"   width="200" height="200" > </a> 
 
    </li> 
 
</ul>

주시면 감사하겠습니다. 감사합니다

가

출처

2016-09-22 tata

HTTP 귀하의 경우 첫 번째가

를 완료 한 후 시작하려는 경우 기간과 같거나 더 큰 : //stackoverflow.com/questions/14384494/multiple-css-keyframe-animations-using-transform-property-not-working –

같은 object.so에 2 개의 다른 애니메이션을 추가 할 수 없습니다

가 img

에 li 두 번째 (swinging)의 첫 번째 애니메이션 (dropHeader)를 사용 jsfiddle 참조> (제 swinging 하나를 animation-delay 추가

이하 jsFiddle

또는 니펫) 첫 번째 (dropHeader) 당신이 animation-delay:0.5s 또는 더 큰

ul { list-style-type:none;} 
 
@-webkit-keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
    } 
 
} 
 
@keyframes swinging { 
 
    0% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
    50% { 
 
     -webkit-transform: rotate(-5deg); 
 
       transform: rotate(-5deg) 
 
    } 
 
    100% { 
 
     -webkit-transform: rotate(10deg); 
 
       transform: rotate(10deg); 
 
    } 
 
} 
 
.swingimage { 
 
    -webkit-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite; 
 
    animation: swinging 3.5s ease-in-out forwards infinite; 
 
    animation-delay:0.5s; 
 
} 
 
.bounce-effect { 
 

 
    -moz-animation-name: dropHeader; 
 
    -moz-animation-iteration-count: 1; 
 
    -moz-animation-timing-function: ease-in-out; 
 
    -moz-animation-duration: 0.5s; 
 

 
    -webkit-animation-name: dropHeader; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
    -webkit-animation-duration: 0.5s; 
 

 
    animation-name: dropHeader; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-in; 
 
    animation-duration: 0.5s; 
 
} 
 

 
@-moz-keyframes dropHeader { 
 
    0% { 
 
     -moz-transform: translateY(-40px); 
 
    } 
 
    100% { 
 
     -moz-transform: translateY(0); 
 
    } 
 
} 
 
@-webkit-keyframes dropHeader { 
 
    0% { 
 
     -webkit-transform: translateY(-40px); 
 
    } 
 
    100% { 
 
     -webkit-transform: translateY(0); 
 
    } 
 
} 
 
@keyframes dropHeader { 
 
    0% { 
 
     transform: translateY(-40px); 
 
    } 
 
    100% { 
 
     transform: translateY(0); 
 
    } 
 
}

<ul class="nav navbar-nav pull-right"> 
 
    <li class="bounce-effect "> 
 
    <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage"   width="200" height="200" > </a> 
 
    </li> 
 
</ul>

출처

2016-09-22 08:34:51

감사합니다 @Mihai T. 그것은 매력처럼 작동합니다! – tata

하나의 오브젝트에 두 개의 애니메이션 추가 [이미지로]

답변

관련 문제