애니메이션 후에 스타일을 유지하는 방법은 무엇입니까?

저는 다음 연구를 신청할 때 보여주기 위해 포트폴리오에서 일하고 있습니다. 2012 년에 살고 있기 때문에 환상적인 애니메이션과 CSS3 쓰레기가 있습니다. '우리는이 사람이 필요합니다'라는 느낌을주기 위해서입니다. 나는 지금 약간의 문제를 겪고있다.애니메이션 후에 스타일을 유지하는 방법은 무엇입니까?

/* This is the CSS of the elements with the id called 'fadein' */ 
#fadein { 
    -moz-animation-duration: 2s; 
    -moz-animation-name: item; 
    -moz-animation-delay: 4.5s; 
    -webkit-animation-duration: 5s; 
    -webkit-animation-name: item; 
-webkit-animation-delay: 4.5s; 
opacity:0; 
-webkit-opacity:0; 
} 

@-webkit-keyframes item { 
from { 
-webkit-opacity: 0; 
    } 
to { 
-webkit-opacity: 1; 
} 
}

들이 상당히 동일하기 때문에 나는 파이어 폭스 키 프레임을 왼쪽 있습니다 :

이 특정 요소의 작은 부분이다. id가 'fadein'인 요소를 페이드 인하게 만드는 못생긴 형식의 CSS ...

문제는 애니메이션이 끝난 후에 요소가 다시 사라진다는 것입니다. 이것은 못생긴 형식의 CSS를 사용할 수없는 CSS로 변환합니다.

애니메이션 후에 변경된 스타일을 유지하는 방법에 대한 생각이 있습니까?

이 질문은 이전에 물어 본 것 같습니다. 그렇다면 정말 죄송합니다.

출처

2012-02-03 amees_me

시도해보십시오 :

#fadein { 
    -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */ 
    -moz-animation-fill-mode: forwards; /* FF 5+ */ 
    -o-animation-fill-mode: forwards;  /* Not implemented yet */ 
    -ms-animation-fill-mode: forwards;  /* IE 10+ */ 
    animation-fill-mode: forwards;   /* When the spec is finished */ 
}

출처

2012-02-03 15:30:35 Duopixel

고맙습니다. 이제 부드럽게 작동합니다. 브라우저 간 호환성을 위해 '웹킷'부분을 'moz'로 변경할 수 있습니까? –

예, 지원되는 브라우저로 답변을 업데이트했습니다. – Duopixel

놀라운! 정중하게 :). –

Duopixels 대답은 올바른 방법입니다,하지만 완전히 크로스 브라우저는, 그러나,이 jQuery 플러그인 애니메이션 콜백을 활성화하고 당신이 콜백 함수에서 같은 방법 요소 스타일을 지정할 수 있습니다 : https://github.com/krazyjakee/jQuery-Keyframes

출처

2012-07-15 17:52:54

애니메이션 후에 스타일을 유지하는 방법은 무엇입니까?

답변

관련 문제