Css3 애니메이션 무한 달리기 효과

-3

도움이 필요합니다. 아래 그림과 같이 배경 이미지를 애니메이션으로 만들고 싶습니다.Css3 애니메이션 무한 달리기 효과

작동하지 않습니다. 아무도 내가 부족한 곳에서 나를 인도 해 주실 수 있습니까?

div.top { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    background: #000000; 
 
    overflow: hidden; 
 
    height:500px 
 
} 
 

 
div.top:before { 
 
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    opacity: 0.49; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    /*z-index: -1;*/ 
 
    animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    transform: scale(1, 1) translate(0px, 0px); 
 
    -webkit-transform: scale(1, 1) translate(0px, 0px); 
 
    -moz-transform: scale(1, 1) translate(0px, 0px); 
 
\t -o-transform: scale(1, 1) translate(0px, 0px); 
 
}

<div class="top">Animate background image here</div>

감사합니다.

출처

2016-09-19 Vikas hatwal

는 어디에'zoomEffect'이 정의인가? –

'animation'을 사용하면 코드에 정의 된 애니메이션이 있지만 공유하지는 않습니다. 애니메이션 코드를 공유하면 도움이됩니다. –

디버깅 도움말을 찾는 질문 (** "왜이 코드가 작동하지 않습니까?") **는 ** 원하는 동작 **, 특정 문제 또는 오류 및 ** 문제 자체에서이를 재현하는 데 필요한 가장 짧은 코드를 포함해야합니다 **. 분명한 문제 설명이없는 질문은 다른 독자에게 유용하지 않습니다. 참조 : [최소한의 완전하고 검증 가능한 예제를 만드는 방법] (http://stackoverflow.com/help/mcve). –

당신은 당신은 여기에 대한 자세한 내용을보실 수 있습니다 애니메이션을 zoomEffect

@keyframes zoomEffect { 
    from {transform: scale(1, 1)} 
    to {transform: scale(2, 2)} 
}

를 정의 할 필요가 : CSS3 Animations

div.top { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    background: #000000; 
 
    overflow: hidden; 
 
    height: 500px 
 
} 
 
div.top:before { 
 
    background: url(https://custom.cvent.com/90FF1E87110A48338D439371A3FD8256/pix/d9a87cea711e4f77bab87dc9242005b3.jpg) no-repeat center 70px; 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    opacity: 0.49; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    /*z-index: -1;*/ 
 
    animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -webkit-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
    -moz--o-animation: 50s ease 0s normal none infinite running zoomEffect; 
 
} 
 

 
@keyframes zoomEffect { 
 
    from {transform: scale(1, 1)} 
 
    to {transform: scale(2, 2)} 
 
}

<div class="top">Animate background image here</div>

출처

2016-09-19 11:50:37

Css3 애니메이션 무한 달리기 효과

답변

관련 문제