почему эта анимация отстает на моем смартфоне? - PullRequest
Новая
       1

почему эта анимация отстает на моем смартфоне?

0 голосов
/ 25 марта 2020

Я сделал эту простую 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>

1 Ответ

0 голосов
/ 28 марта 2020

Вы можете отключить анимацию на вашем смартфоне. Ниже у вас есть готовое решение. Однако сначала попытайтесь оптимизировать ваш код. Выбрось то, что не нужно. 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...