CSS3 애니메이션 타이밍로드시

현재 배경 이미지를 회전시키는 CSS3 애니메이션이 있습니다. 내가 가지고있는 문제는 내가 꽤 오래하는 애니메이션의 타이밍을 필요로한다, 그래서 그들은 산만하지 않으며이는 첫번째 슬라이드에 완화 될 때까지 pageload에 검은 배경으로 반영됩니다 여기에 있습니다 :.CSS3 애니메이션 타이밍로드시

.cb-slideshow li span { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: transparent; 
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: none; 
    opacity: 0; 
    z-index: 0; 
    -webkit-backface-visibility: hidden; 
    -webkit-animation: imageAnimation 144s linear infinite 0s; 
    -moz-animation: imageAnimation 144s linear infinite 0s; 
    -o-animation: imageAnimation 144s linear infinite 0s; 
    -ms-animation: imageAnimation 144s linear infinite 0s; 
    animation: imageAnimation 144s linear infinite 0s; 
} 
.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/1.jpg) 
} 
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/2.jpg); 
    -webkit-animation-delay: 24s; 
    -moz-animation-delay: 24s; 
    -o-animation-delay: 24s; 
    -ms-animation-delay: 24s; 
    animation-delay: 24; 
}

처음부터 검은 색 배경이 없도록 조정하는 가장 좋은 방법은 무엇입니까? 백그라운드 기본값이 있어야합니까? 애니메이션을 변경하여 첫 번째 슬라이드가 매우 빠르게 움직이지 만 다음 반복을 위해 정상으로 돌아갈 수 있습니까?

출처

2013-08-15 Chris

페이지로드 후에 javascript를 사용하여'.cb-slideshow' 클래스를 추가 할 수 있습니까? – Plato

이렇게하면이 슬라이드 쇼의 배경 이미지가 필요하게 될 것입니다.하지만 이것을 고려해 보았습니다.하지만 여전히이 성능 효과를 비교하려고합니다. 이상적인 해결책은'.cb-slideshow li : nth-child (1) span : iteration (1)'을 처음 실행하기위한 구체적인 지침을 선언하기 위해서라고 생각합니다. 이것이 가능한지는 모르겠습니다. . – Chris

'imageAnimation'을 포함 할 수 있습니까? –

나는 그것을 이해하기 때문에, 당신은 144 초 이상 지속된다.

그런 다음이 애니메이션을 공유하는 여러 요소가 있고 두 번째 요소는 24 초 지연됩니다.

그래서 6 개의 요소가 있고 나머지 요소는 48,72 등으로 지연됩니다.

한 가지 방법은 첫 번째 전환 이전에 조금 더 지연 설정되어 있는지 확인합니다 :

을 당신이 0, 1 ~ 24, 48, 72, 96, 120

세트를, 25, 49, 73, 97, 121.

첫 번째 전환은 1 초에 발생합니다.

일단 시작되면 모든 것이 동일하게 유지됩니다. (요소 들간의 지연은 변함없이 유지됨)

출처

2013-08-19 16:30:14 vals

CSS3 애니메이션 타이밍로드시

답변

관련 문제