불투명도 및 CSS3 애니메이션이 작동하지 않습니까?

Question

내 아이템이 왼쪽에서 오른쪽으로 움직이지 않습니다! 브라우저에서 불투명도가 작동하지 않는다고 생각합니까? 불투명도 코드를 제거했을 때 작동했습니다! 하지만 불투명도를 추가하자마자 아무 일도 일어나지 않습니다!CSS 애니메이션이 발생하기 전에 이미지를 숨기려고합니다.

#section1{ 
    background: white; 
    height: 100vh; 
} 

#section1 h2{ 
    font-size: 60px; 
    color: black; 
    text-shadow: 1px 2px rgba(0,0,0,0.7); 
    margin: 0 auto; 
    text-align: center; 
    padding-top: 6%; 
    display: none; 
} 

#section1 img{ 

margin-bottom: 0; 
margin-left:20%; 
margin-top: 7%; 
opacity: 0; 

    -webkit-animation: phoneslidein 1s ease 3.5s forwards; 
    animation: phoneslidein 1s ease 3.5s forwards; 
} 

@keyframes phoneslidein{ 
    0%{ 
    margin-left: -60%; 
    opacity:0; 
    } 

    1%{ 
    opacity:1; 
    } 

    100%{ 
    margin-left: 20%; 

    } 
} 

@-webkit-keyframes phoneslidein{ 
    0%{ 
    margin-left: -60%; 
    } 
    100%{ 
    margin-left: 20%; 
    } 
} 

HTML

<div id ="section1"> 
    <h2>Be awesome!</h2> 
    <img src="phone.png"/> 
</div> 

Answer 1

당신은 (웹킷)

VIEW DEMO

접두사 애니메이션에 추가 잊어 버렸 및 불투명도은 0 렸기 때문에, 당신은 애니메이션을보고하지 않았다

@-webkit-keyframes phoneslidein{ 
    0%{ 
    margin-left: -60%; 
    opacity:0; 
    } 
    100%{  
    margin-left: 20%; 
    opacity:1; 
    } 
}