div에 영향을 미치는 의사 요소에 CSS 애니메이션 적용

이미지 슬라이더를 만들려고하고 있습니다. 애니메이션 진행률 표시 줄과 : 후를 재생/일시 중지 아이콘으로 사용하는 것 외에는 모두 작동합니다. 호버하지만 문제는 .slider : before와 "after .image-container가 멈추지 않도록합니다. 마우스를 올리면 모두 동기화되지 않습니다. 누군가 제발 나를 도와 줄 수 있습니까div에 영향을 미치는 의사 요소에 CSS 애니메이션 적용

PS 나는 그 때 애니메이션이 같은 뭔가 어쩌면

body{ 
    margin:0; 
    padding:0; 
} 
.slider{ 
    padding:0; 
    width:1280px; 
    height:720px; 
    position:relative; 
    overflow:hidden; 
    background:green; 
} 
.image-container{ 
    width:500%; 
    position:relative; 
    -webkit-animation: slide 20s ease-out 0 infinite normal; 
    animation: slide 20s ease-out 0 infinite mormal; 
} 
div.image-container img{ 
    float:left; 
    width:20%; 
    height:auto; 
} 
div.slider:after{ 
    content:""; 
    width:0; 
    height:0; 
    position:relative; 
    float:left; 
    top:-688px; 
    left:32px; 
    background:rgba(0,0,0,0); 
    border-top:24px solid transparent; 
    border-left:48px solid rgba(255,255,255,.1); 
    border-bottom:24px solid transparent; 
    transition:all .3s; 
} 
div.slider:before{ 
    content:""; 
    width:0; 
    height:0px; 
    z-index:1; 
    position:absolute; 
    float:left; 
    top:700px; 
    border-top:20px double rgba(255,255,255,.1); 
    background:rgba(255,255,255,.1); 
    -webkit-animation: progress 5s ease-out -2s infinite; 
    animation: progress 5s ease-out -2s infinite; 
} 
div.slider:hover:before{ 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
} 
div.slider:hover:after{ 
    width:16px; 
    height:48px; 
    border-left:48px double rgba(255,255,255,.1); 
    border-top:0 solid transparent; 
    border-bottom:0 solid transparent; 
} 
div.image-container:hover{ 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused; 
} 
@-webkit-keyframes slide{ 
    0% {right:0%;} 
    10% {right:0%;} 
    15% {right:100%;} 
    35% {right:100%;} 
    40% {right:200%;} 
    60% {right:200%;} 
    65% {right:300%;} 
    85% {right:300%;} 
    90% {right:400%;} 
    100% {right:400%;} 
} 
@keyframes slide{ 
    0% {right:0%;} 
    10% {right:0%;} 
    15% {right:100%;} 
    35% {right:100%;} 
    40% {right:200%;} 
    60% {right:200%;} 
    65% {right:300%;} 
    85% {right:300%;} 
    90% {right:400%;} 
    100% {right:400%;} 
} 
@-webkit-keyframes progress{ 
    0% {width:0px;} 
    80% {width:1280px;} 
    100% {width:0px;} 
} 
@keyframes progress{ 
    0% {width:0px;} 
    80% {width:1280px;} 
    100% {width:0px;} 
}

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Page</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 

<div class="slider"> 
    <div class="image-container"> 
     <img src="1.jpg"> 
     <img src="2.jpg"> 
     <img src="3.jpg"> 
     <img src="4.jpg">  
     <img src="1.jpg"> 
    </div> 
</div> 

</body> 
</html>

와 프레임 밖으로 이동되는 전후 이미지입니다-컨테이너의 아이 만?

을 시도

div.slider:before:hover .image-container{ 
    -webkit-animation-play-state: paused; 
    animation-play-state: paused;

당신의 CSS에서

출처

2014-11-09 user2072017

'div.slider : hover : before' 한 번에 두 개의 의사 요소를 사용하면 엉망이됩니다. 따라서 유혹하는 동안 사용할 항목을 결정한 다음 CSS를 작성하십시오. – cuSK

그래서 나는 이렇게 할 수 있을까? div.slider : before : 마우스 오버 이미지. 컨테이너 { \t -webkit-animation-play-state : 일시 중지됨; 애니메이션 재생 상태 : 일시 중지됨. } – user2072017

오케이 지금 무슨 말인지 알았어. 이걸로 고쳤어. div.slider : 호버 div.image-container { \t -webkit-animation-play-state : paused; 애니메이션 재생 상태 : 일시 중지됨. } – user2072017

는 :

div.slider:hover:before

이 의사 요소를 사용하여 잘못된 방법입니다. 두 개의 의사 요소를 한 번에 사용했습니다. 이것은 엉망을 만들 것입니다.

따라서 사용하는 의사 요소를 결정한 다음 원하는 CSS 스타일로 페이지 스타일을 지정할 수 있습니다.

출처

2014-11-10 16:27:03 cuSK

div에 영향을 미치는 의사 요소에 CSS 애니메이션 적용

답변

관련 문제