@keyframes는 div 내의 div와 작동하지 않습니다.

처음으로 @keyframes를 사용하고 있지만 제대로 작동하지 않습니다.@keyframes는 div 내의 div와 작동하지 않습니다.

내가 뭘 잘못하고 있는지 아는 사람이 있습니까?

애니메이션을 .scroll_down div에 배치하면 애니메이션이 적용되지만 애니메이션 안에 div가 있어야합니다. 내가 왜 그렇게 할 수없는 이유가 있니?

HTML :

<body> 
    <div class="container_first"> 
    <div class="scroll-down"> 
     <div id="arrow">&#8681;</div> 
    </div> 
    </div>

CSS :

.scroll-down { 
    display: block; 
    height: 80px; 
    width: 110px; 
    display: block; 
    position: absolute; 
    bottom: 0px; 
    right: 5%; 
    background-color: #222; 
    text-align: center; 
    z-index: 6; 
} 

#arrow { 
    color: #FFF; 
    font-size: 36px; 
    padding-right: 2px; 
    padding-top: 10px; 
    animation: bounce 1.2s linear infinite; 
} 

#arrow { padding-top: 0px; } 
@keyframes bounce { 
    0% {top: 10px;} 
    25% {top: 15px;} 
    75% {top: 20px;} 
    100% {top: 25px;} 
}

출처

2017-10-27 johnwangel

당신은 #arrow 위치를 확인해야합니다.

http://jsfiddle.net/myvvwb4m/

#arrow { 
    color: #FFF; 
    font-size: 36px; 
    position: relative; 
    padding-right: 2px; 
    padding-top: 10px; 
    animation: bounce 1.2s linear infinite; 
}

재산권 top

정적 위치 요소에 적용되지 않습니다.

출처

2017-10-27 00:23:53

그랬습니다. 정말 고맙습니다!! – johnwangel

괜찮 으면 대답을 수락 할 수 있습니다. –

@keyframes는 div 내의 div와 작동하지 않습니다.

답변

관련 문제