CSS 흔들기/흔들기 효과

내가 의도 한 효과 : - 몇 번 흔들어서 흔들기를 멈춥니다. 마우스를 가져갈 때까지 주기적으로이 동작을 수행하십시오. - 마우스를 올리면 흔들기 동작이 완전히 중단됩니다. - 전체 전환이 매끄 럽습니다. -webkit-animation 키 프레임을 사용해 보았지만 마우스를 움직이지 않을 때 전환을 쉽게하기 위해 -webkit-animation-timing-function을 사용했습니다. 또한, 나는 wiggle, stop 및 wiggle의 기간 모션을 달성하는 방법에 대해 분실했습니다. 올바른 방향을 지적 해 주시면 감사하겠습니다.CSS 흔들기/흔들기 효과

출처

2016-06-30 Sangam Chouchan

Dan Eden이 만든 애니메이션 용 CSS 프레임 워크 인 "Animate.css"를 확인하십시오. 크레이그 데니스 (Craig Dennis)는 jquery 플러그인을 사용하여 프레임 워크를 확장하여 애니메이션 간의 스타킹/스톱 훅 및 지연을 쉽게 연결할 수있게했습니다. 이 둘을 함께 사용하면 흔들림/멈춤/흔들기를 원하는대로 할 수 있습니다. –

animate.css는 실제로 매우 훌륭하고 뛰어난 유연성을 제공합니다. 기본 원칙을 익히기 위해 코드를 공부할 수 있습니다. 감사! –

는 다음 중 하나를 시도해보십시오

.class:hover { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    10%, 90% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    20%, 80% { 
    transform: translate3d(2px, 0, 0); 
    } 

    30%, 50%, 70% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    40%, 60% { 
    transform: translate3d(4px, 0, 0); 
    } 
}

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

또는 이 스크립트에이 추가 : <link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>

그리고 당신은

를 흔들 할 요소에 클래스를 추가 전체 설명서는 여기 : https://elrumordelaluz.github.io/csshake/

출처

2016-06-30 20:33:55

여기에 마우스를 가져 가면 멈출 수있는 간단한 흔들기 애니메이션이 있습니다.

흔들기 사이에 지연을 구현하려면 애니메이션의 "빈 청크"즉 아무 것도 변경되지 않는 기간을 포함시킬 수 있습니다. 나의 예에서는 0 %와 80 % 사이에서 아무 변화가 없으며 "흔들림"은 마지막 20 %에서만 발생합니다 (0.5 초에서 끝납니다).

@keyframes wiggle { 
 
    0% { transform: rotate(0deg); } 
 
    80% { transform: rotate(0deg); } 
 
    85% { transform: rotate(5deg); } 
 
    95% { transform: rotate(-5deg); } 
 
    100% { transform: rotate(0deg); } 
 
} 
 

 
h1.wiggle { 
 
    display: inline-block; 
 
    animation: wiggle 2.5s infinite; 
 
} 
 

 
h1.wiggle:hover { 
 
    animation: none; 
 
}

<h1 class="wiggle"> 
 
    wiggle, wiggle 
 
</h1>

불행하게도, 이것은 당신이 중간 애니메이션을 그 위에 올려 놓으면 다시 않은 흔들 상태로 "완화"고려하지 않습니다. 그렇게하려면 약간의 JavaScript가 필요할 수 있습니다.

출처

2016-06-30 20:49:18

감사합니다! 그것은 여전히 애니메이션의 주기성을 제어하고 있던 내 문제의 한 부분을 해결합니다. 나는 CSS가 애니메이션을 완화 시키는데 충분할 것이라고 생각했다. 어떻게 자바 스크립트에서 할 것인가? –

@SangamChouchan 나는 CSS가 충분하다고 생각했다. 나는'transition : transform 0.5s'를'h1.wiggle' 클래스에 추가하면 애니메이션에서 쉽게 벗어나지 만 작동하지 않는 것 같아요. 지금 자바 스크립트 솔루션으로 실험하고 있습니다. –

CSS 흔들기/흔들기 효과

답변

관련 문제