는 CSS3 애니메이션 키 프레임

Question

난이 애니메이션에 2sectop=400px-top 0px에서 DIV 이동

div{ 
    animation-name:moveit; 
    animation-duration:2s; 
} 

@keyframes moveit{ 
    0%{ 
    top:0; 
    } 
    100%{ 
    top:400px; 
    } 
} 

같이 DIV 애니메이션 정지했다.

이제 문제는 애니메이션이 끝나면 top=0으로 돌아갑니다. 애니메이션이 끝나면 애니메이션이 끝나야합니다. top=400px;

그것은 반복 doesnot하지만 원래 위치로 돌아옵니다하지만 난 당신이 당신의 div 요소 초기 Top 속성을 줄 수있는 애니메이션의 종료 상태를 유지하기 위해 100 %

Answer 1

에 있고 싶어.

div { 
    top: 400px; 
    animation-name: moveit; 
    animation-duration: 2s; 
} 

@keyframes moveit { 
    0% { top: 0px; } 
    100% { top: 400px; } 
} 

애니메이션이 끝나면 div의 최상위 속성이 인계 받기 때문에 원하는 효과를 얻을 수 있습니다.