CSS 애니메이션은 다음과 같이 사용될 때 IE에서 작동하지 않습니다 : 호버 및 호버 : 첫 번째 레터

Question

첫 글자 색상을 변경하고 CSS로 텍스트를 애니메이션하려고합니다. Chrome과 Safari에서는 제대로 작동하지만 인터넷 익스플로러 10과 11에서는 작동하지 않습니다. 내 CSS 코드는 다음과 같습니다.

.amy:before {
    content:"Amy";
}
.amy {
    display: block;
    width:50px;
    height:30px;
    color:#c63b2c;
    font-size:24px;
}
.amy:hover {        
    display: block;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wobble;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wobble;
    -o-animation-duration: 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-name: wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: wobble; 
}
.amy:hover:first-letter {
    color:black;
}

없는 경우 : First-Letter Pseudo 요소 애니메이션은 IE에서 매력처럼 작동합니다.

Answer 1

왜 그렇게하는지 잘 모르겠습니다. 당신이 속성을 추가 할 때마다 :first-letter psuedo 클래스, 애니메이션은 더 이상 작동하지 않습니다.

그만큼 :first-letter Psuedo 클래스는 이전 호버를 취소하는 것 같습니다.

jsfiddle

PSUEDO 클래스가 활성화 될 때마다 알 수 있듯이 이전 : 호버 (이 경우 전환)를 취소합니다.

그래서 당신의 경우 나는 당신의 애니메이션조차 실행하지 않습니다

나는 왜 이런 일이 일어나는지, 그것은 이전의 큰 버그처럼 보인다 :

:first-letter Psuedo 클래스는 클래스 또는 의사 클래스 (예 : Div : First-Letter : Hover)가 뒤 따르는 경우 작동하지 않습니다.
지금은 다른 방법 인 것 같습니다.

이론은 언제 :first-letter 작동하지 않습니다. 그게 a :hover 의사 클래스는 "생성 된 컨텐츠"로 간주되지 않습니다.

다음을 사용하여 다음과 같은 내용을 생성하는 컨텐츠에 적용되는 첫 번째 레터 및 : 1 차 글자 및 : 1 라인 Pseudo 요소가 적용됩니다. 생성 된 컨텐츠.

원천 : http://www.w3.org/tr/css2/selector.html#before-and-after

그런 식으로 :hover 표시되지 않습니다.

---

나는 여러 문서를보고 아무것도 찾을 수 없었습니다 다른 애니메이션, 키 프레임, 트랜 포맷, 1 글자 PSUEDO 클래스 간의 관계. 호버 푸에도 클래스와 1 글자 PSUEDO 클래스 사이의 흥분, 즉 IE에서 서로 상호 작용하지 않을 수 있습니다.

---

tl; dr

아마도 버그 일 가능성이 높습니다.
당신의 :first-letter Psuedo-Class는 The와 함께 작동하지 않습니다 :hover 부모 요소의 psuedo 클래스. 그만큼 :hover 표시되지 않는 Psuedo-Class이므로 애니메이션이로드되지 않습니다.

일하면서

컨텐츠를 HTML에 직접 배치하고 첫 글자를 스팬으로 감을 수 있습니다.

<div style="width:160px;height:300px;float:right;">
    <a href="kapcsolat.html" class="animated menu5">
        <span>K</span>apcsolat
    </a>
</div>

앵커가 호버링 될 때 스타일을 추가하는 곳 :

.menu5:hover > span
{
   color: black;
}

jsfiddle

Answer 2

어떤 버전의 IE에서 테스트하고 있습니까? IE 10과 11에서 작동하지만 이전 버전은 CSS3 애니메이션 사용을 지원하지 않습니다. 구경하다 http://caniuse.com/css-animation

Answer 3

버전 9 이상으로 테스트하는 경우 아무것도 표시되지 않습니다.

브라우저를 IE 10 이상으로 넣을 수 있습니다. F12 버튼을 선택한 다음 선택합니다 Browsermode IE10 또는 IE11