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

你忘了把它添加到前缀动画（webkit）

VIEW DEMO

因为不透明度为0，你没有看到动画

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

不透明度和css3动画不起作用？

1 个答案: