따라서 마우스 아웃시 다음과 같은 리버스 애니메이션이 가능합니다.
.class{
transform: rotate(0deg);
}
.class:hover{
transform: rotate(360deg);
}
그러나 @keyframes 애니메이션을 사용할 때 작동하지 못했습니다. 예 :
.class{
animation-name: out;
animation-duration:2s;
}
.class:hover{
animation-name: in;
animation-duration:5s;
animation-iteration-count:infinite;
}
@keyframe in{
to {transform: rotate(360deg);}
}
@keyframe out{
to {transform: rotate(0deg);}
}
반복과 애니메이션 자체가 필요하다는 것을 알고있는 최적의 솔루션은 무엇입니까?
답변
난 당신이이 있다면 생각 to, 당신은을 사용해야합니다 from. 나는 다음과 같은 것을 생각할 것입니다.
@keyframe in {
from: transform: rotate(0deg);
to: transform: rotate(360deg);
}
@keyframe out {
from: transform: rotate(360deg);
to: transform: rotate(0deg);
}
물론 이미 확인 했어야하지만 transformCSS3가 모든 곳에서 완전히 구현되지 않았기 때문에 속성 만 사용하는 것이 이상합니다 . 다음 사항을 고려하면 더 잘 작동 할 수 있습니다.
- Chrome은을 사용
@-webkit-keyframes하며 특별한 버전이 필요하지 않습니다. - Safari는
@-webkit-keyframes버전 5 이상부터 사용합니다. - Firefox는
@keyframes버전 16부터 사용 (v5-15 사용@-moz-keyframes) - Opera는
@-webkit-keyframes버전 15-22를 사용합니다 (v12 만 사용@-o-keyframes). - Internet Explorer는
@keyframes버전 10 이상부터 사용합니다.
편집하다 :
나는 그 바이올린을 생각 해냈다.
최소한의 코드 사용. 당신이 기대했던 것에 접근하고 있습니까?
답변
이 모든 것보다 훨씬 쉽습니다. 요소에서 동일한 속성을 전환하기 만하면됩니다
.earth { width: 0.92%; transition: width 1s; }
.earth:hover { width: 50%; transition: width 1s; }
https://codepen.io/lafland/pen/MoEaoG
답변
CSS 애니메이션만으로는 달성 할 수 없다고 생각합니다. (예를 들어) 두 애니메이션을 함께 연결하거나, 여러 중지, 반복을 사용하거나, 다른 방식으로 추가 파워 애니메이션이 부여하는 것을 활용하기를 원하기 때문에 CSS 전환 이 사용 사례를 충족 하지 않는다고 가정 합니다.
JavaScript를 사용하여 “over”및 “out”클래스를 연결하지 않고 마우스 아웃시 CSS 애니메이션을 트리거하는 방법을 찾지 못했습니다. : hover가 끝날 때 애니메이션을 트리거하는 기본 CSS 선언을 사용할 수 있지만 동일한 애니메이션이 페이지로드시 실행됩니다. “over”및 “out”클래스를 사용하여 정의를 기본 (로드) 선언과 두 개의 애니메이션 트리거 선언으로 분할 할 수 있습니다.
이 솔루션의 CSS는 다음과 같습니다.
.class {
/* base element declaration */
}
.class.out {
animation-name: out;
animation-duration:2s;
}
.class.over {
animation-name: in;
animation-duration:5s;
animation-iteration-count:infinite;
}
@keyframes in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
그리고 JavaScript (jQuery 구문)를 사용하여 클래스를 이벤트에 바인딩합니다.
$(".class").hover(
function () {
$(this).removeClass('out').addClass('over');
},
function () {
$(this).removeClass('over').addClass('out');
}
);
답변
반전 된 애니메이션을 만드는 것은 간단한 문제에 대한 과잉입니다. 필요한 것은
animation-direction: reverse
그러나 이것은 애니메이션 사양이 너무 덤프되어 애니메이션을 다시 시작하는 방법을 추가하는 것을 잊었 기 때문에 자체적으로 작동하지 않습니다.
let item = document.querySelector('.item')
// play normal
item.addEventListener('mouseover', () => {
item.classList.add('active')
})
// play in reverse
item.addEventListener('mouseout', () => {
item.style.opacity = 0 // avoid showing the init style while switching the 'active' class
item.classList.add('in-active')
item.classList.remove('active')
// force dom update
setTimeout(() => {
item.classList.add('active')
item.style.opacity = ''
}, 5)
item.addEventListener('animationend', onanimationend)
})
function onanimationend() {
item.classList.remove('active', 'in-active')
item.removeEventListener('animationend', onanimationend)
}@keyframes spin {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
div {
background: black;
padding: 1rem;
display: inline-block;
}
.item {
/* because span cant be animated */
display: block;
color: yellow;
font-size: 2rem;
}
.item.active {
animation: spin 1s forwards;
animation-timing-function: ease-in-out;
}
.item.in-active {
animation-direction: reverse;
}<div>
<span class="item">ABC</span>
</div>답변
하나의 애니메이션 만 가지고 있지만 반대로하는 것이 더 낫습니까?
animation-direction: reverse
답변
requestAnimationFrame을 사용하여 애니메이션을 재설정하고 브라우저가 다음 프레임에 그릴 때 되돌릴 수 있습니다.
또한 onmouseenter 및 onmouseout 이벤트 핸들러를 사용하여 애니메이션 방향을 반전합니다.
이벤트 핸들러에 대기중인 모든 rAF는 동일한 프레임에서 실행됩니다. rAF에 대기중인 모든 rAF는 다음 프레임에서 실행됩니다.
function fn(el, isEnter) {
el.className = "";
requestAnimationFrame(() => {
requestAnimationFrame(() => {
el.className = isEnter? "in": "out";
});
});
}.in{
animation: k 1s forwards;
}
.out{
animation: k 1s forwards;
animation-direction: reverse;
}
@keyframes k
{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}<div style="width:100px; height:100px; background-color:red"
onmouseenter="fn(this, true)"
onmouseleave="fn(this, false)"
></div>답변
이 시도:
@keyframe in {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframe out {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
Firefox 5 이상, IE 10 이상, Chrome, Safari 4 이상, Opera 12 이상에서 지원
