CODEWITHSUNDEEP
css
user4409899
user4409899

Reputation:

Opacity and css3 animation are not working?

My item is not animating from left to right! I suspect that opacity is not working in my browser? When I removed the opacity code was working! But as soon as i added opacity nothing happens! I am trying to hide the image before css animation takes place.

#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>

Upvotes: 0

Views: 60

Answers (1)

Elad Shechter
Elad Shechter

Reputation: 4045

you Forgot to add it to the prefix animation (webkit)

VIEW DEMO

and becouse the opacity was 0, you didn't saw the animation

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

Upvotes: 1

Related Questions