@keyframes 애니메이션 (회전) 및 : 호버 (눈금)

호버 효과 (척도)를 사용하여 @keyframes (회전) 기반 combinig CSS 애니메이션에 문제가 있습니다. 'm 신인 선수 - 그건 분명하다).@keyframes 애니메이션 (회전) 및 : 호버 (눈금)

어떤 종류의 애니메이션 배경을 만들고 싶습니다.
1. 작은 기호/문자/아이콘 (무엇이든)이 움직이고 있습니다 (일부는 돌아 다니며, 일부는 X 또는 Y 축);
2 : 마우스를 올리면 성장합니다 (그러나 계속 움직입니다).
그리고 마지막으로 :
3. @keyframe 애니메이션을 일시 중지하지 않습니다.

지금이 코드를 생각해 냈습니다 https://jsfiddle.net/56q4b9fg/2/ 문제는 다음과 같습니다. 마우스를 올리면 기본 애니메이션이 트랙을 계속 재생하는 대신 처음부터 시작됩니다. 이 문제를 어떻게 해결할 수 있습니까? 그리고 세 번째 문제를 모든 시퀀스가 끝난 후 일시 중지하는 방법은 무엇입니까?

.pattern { 
    height: 100vh; 
    width: 100vw; 
    margin: 0 auto; 
    background-color: rgb(170, 57, 57); 
    color: rgb(255,255,255); 
} 

.grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(8, 1fr); 
    justify-items: center; 
    align-items: center; 
    overflow: hidden; 
} 

.symbol-1 { 
    grid-area: 2/2/2/2; 
    justify-self: center; 
} 

.symbol-2 { 
    grid-area: 4/3/3/5; 
    justify-self: center; 
    align-self: start; 
} 

.downRight { 
    animation: downRight 7s infinite; 
} 

.downRight:hover { 
    animation: downRightAndScale 7s infinite; 
} 

.spin { 
    animation: spin 7s infinite; 
} 

.spin:hover { 
    animation: spinAndScale 7s infinite; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

@keyframes downRight { 
    0%, 100% { transform: translateX(0) translateY(0); } 
    50% { transform: translateX(20px) translateY(20px); } 
} 

@keyframes spinAndScale { 
    0% { transform: rotate(0deg) scale(1.0); } 
    10% { transform: rotate(10deg) scale(1.1); } 
    50% { transform: rotate(180deg) scale(1.5); } 
    100% { transform: rotate(360deg) scale(1.0); } 
} 

@keyframes downRightAndScale { 
    0%, 100% { transform: translateX(0) translateY(0) scale(1.0);} 
    50% { transform: translateX(20px) translateY(20px) scale(1.5);} 
}

출처

2017-11-11 mery_b

가장 간단한 해결책은 다른 요소에서 symbol-1 및 symbol-2 싸서 맴돌고이 요소를 변형하는 것이다. 또한 전환을 사용하여 애니메이션을 만듭니다. 아래에 삽입 된 스 니펫을 살펴보십시오.

.pattern { 
 
\t height: 100vh; 
 
\t width: 100vw; 
 
\t margin: 0 auto; 
 
    background-color: rgb(170, 57, 57); 
 
    color: rgb(255,255,255); 
 
} 
 

 
.grid { 
 
\t display: grid; 
 
\t grid-template-columns: repeat(12, 1fr); 
 
\t grid-template-rows: repeat(8, 1fr); 
 
\t justify-items: center; 
 
\t align-items: center; 
 
\t overflow: hidden; 
 
} 
 

 
.symbol { 
 
\t -webkit-transition: all 1000ms ease; 
 
\t -moz-transition: all 1000ms ease; 
 
\t -o-transition: all 1000ms ease; 
 
\t transition: all 1000ms ease; 
 
    transform: scale(0.5); 
 
    font-size: 2em 
 
} 
 

 
.symbol:hover { 
 
    transform: scale(1); 
 
} 
 

 
.symbol-1 { 
 
\t grid-area: 2/2/2/2; 
 
\t justify-self: center; 
 
} 
 

 
.symbol-2 { 
 
\t grid-area: 4/3/3/5; 
 
\t justify-self: center; 
 
\t align-self: start; 
 
} 
 

 
.downRight { 
 
\t animation: downRight 7s infinite; 
 
} 
 

 
.spin { 
 
\t animation: spin 7s infinite; 
 
} 
 

 
@keyframes spin { 
 
\t 0% { transform: rotate(0deg); } 
 
\t 100% { transform: rotate(360deg); } 
 
} 
 

 
@keyframes downRight { 
 
\t 0%, 100% { transform: translateX(0) translateY(0); } 
 
\t 50% { transform: translateX(20px) translateY(20px); } 
 
}

<body> 
 
    <div class="pattern grid"> 
 
    <!-- Wrap the symbols in a div with class "symbol" that scales on hover --> 
 
    \t <div class="symbol symbol-1"><div class="downRight"> \t 1 \t </div></div> 
 
    <div class="symbol symbol-2"><div class="spin"> \t 2 \t </div></div> 
 
    </div> 
 
</body>

나는이 문제 :

출처

2017-11-12 14:38:25 Evochrome

안녕하세요 (- 위대한 ... 내가 실수로 내 마지막 코멘트를 삭제 한 생각) 해결 신뢰합니다. 귀하의 솔루션은 규모 (덕분에 내 문제를 해결!),하지만 CSS는 그리드 위치에 대해? 그것은 더 이상 작동하지 않는 것 같습니다 :/또한 .symbol에 그리드를 추가하려고했지만 사각형으로 돌아 왔습니다. : hover가 작동하지 않습니다 ... 어떻게 이것을 함께 결합 할 수 있습니까? css로 배치 된 애니메이션 요소 그리드 : hover? –

죄송합니다.'symbol-1'과'symbol-2' 클래스를 부모 요소로 바꾸기 만하면됩니다. 업데이트 된 스 니펫을 확인하십시오. 또한, 내 대답이 당신의 문제를 해결했다면, 정답으로 표시해 주시기 바랍니다, 감사합니다! :) – Evochrome

고마워요! 모든 것이 완벽하게 작동합니다 :) –

@keyframes 애니메이션 (회전) 및 : 호버 (눈금)

답변

관련 문제