My element is not moving from left to right as expected! I have a feeling that the opacity property is not functioning properly in my browser. When I removed the opacity code, everything worked fine. But when I added it back, nothing seemed to happen. I am attempting to conceal the image before the CSS animation begins.
#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>