为什么动画会滞留在我的智能手机上？

问题描述 投票：0回答：1

我制作了一个简单的CSS动画，该动画在计算机上可以很好地运行，但是一旦在智能手机上尝试了它，我发现它有点生涩，您能解释一下为什么以及如何解决它吗？我更希望在手机上也能看到动画，但是如果不可能，是否有任何媒体查询可以打开手机上的动画？

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
  box-shadow: 5px 10px 18px #888888;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.thumbnail .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.thumbnail img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.thumbnail h3 {
  color: red;
  text-align: center;
  position: relative;
  font-size: 17px;  
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  padding: 10px;
}
.thumbnail:hover img {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
  margin-bottom: 10%;
}
.thumbnail:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
}
.thumbnail:hover h3,.thumbnail:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-transform: translatey(0);
  -webkit-transform: translatey(0);
  transform: translatey(0);
}
.container-fluid {
  padding: 60px 50px;
}
.bg-grey {
  background-color: #f6f6f6;
}
<div id="portfolio" class="container-fluid text-center bg-grey"> 
  <h2>Portfolio</h2><br>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414079:1561364425/MMNX-4954-ToSuaOceanTrench.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6352f9b"  width="400" height="300">
        
        <div class="overlay">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

    </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414077:1561364425/MMNX-4954-1280px-Calanque_de_Sormiou_5.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=c0a1b8f"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414078:1561364425/MMNX-4954-1280px-Jenny_Lake_boat_ride.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6d2bd4e"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
  </div>
</div>
javascript jquery html css bootstrap-4
1个回答
0
投票

您可以关闭智能手机上的动画。您可以在下面找到现成的解决方案。但是，请首先尝试优化您的代码。扔掉不需要的东西。

.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
  box-shadow: 5px 10px 18px #888888;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.thumbnail .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
}
.thumbnail img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}
.thumbnail h3 {
  color: red;
  text-align: center;
  position: relative;
  font-size: 17px;  
  -webkit-transform: translatey(-100px);
  -ms-transform: translatey(-100px);
  transform: translatey(-100px);
  -webkit-transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  transition: all 0.4s cubic-bezier(0.88,-0.99, 0, 1.81);
  padding: 10px;
}

@media only screen and (min-width: 786px){
  .thumbnail:hover img {
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
    filter: blur(5px);
    margin-bottom: 10%;
  }
  .thumbnail:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  .thumbnail:hover h3,.thumbnail:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-transform: translatey(0);
    -webkit-transform: translatey(0);
    transform: translatey(0);
  }
}

.container-fluid {
  padding: 60px 50px;
}
.bg-grey {
  background-color: #f6f6f6;
}
<div id="portfolio" class="container-fluid text-center bg-grey"> 
  <h2>Portfolio</h2><br>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414079:1561364425/MMNX-4954-ToSuaOceanTrench.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6352f9b"  width="400" height="300">
        
        <div class="overlay">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

    </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414077:1561364425/MMNX-4954-1280px-Calanque_de_Sormiou_5.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=c0a1b8f"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="https://www.lastampa.it/image/contentid/policy:1.35414078:1561364425/MMNX-4954-1280px-Jenny_Lake_boat_ride.jpg?f=gallery_1280&h=702&w=1280&$p$f$h$w=6d2bd4e"  width="400" height="300">
        
        <div class="overlay">
          <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</h3>
      </div>
      <strong>Lorem ipsum dolor sit amet</strong>

      </div>
    </div>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.