Css3完成无缝拼✤接翻转防抖

2021-03-24 00:18 jianzhan

难题

照片加文本的无缝拼接翻转,手中机端的实际效果整体还好,可是照片手中机一些访问器会抖得腻害!

不正确书写

不可以用left,margin-left,像这类书写:

.donghua.active{
  animation: scoll ease-in-out 1s infinite alternate;
  -webkit-animation: scoll ease-in-out 1s infinite alternate;
}
@keyframes scoll  {
  from {
    left: 0;
  }
  to {
    left: -353px;
  }
}
-webkit-@keyframes scoll  {
  from {
    left: 0;
  }
  to {
    left: -353px;
  }
}

处理方式

里边的某一原素手中机端会颤动的腻害,改成二维的translate像那样:

.donghua.active{
  animation: scoll ease-in-out 1s infinite alternate;
  -webkit-animation: scoll ease-in-out 1s infinite alternate;
}
@keyframes scoll {
  0% {
    transform: translate(0px, 0px);
  }

  100% {
    transform: translate(0px, -353px);
  }
}
@-webkit-keyframes scoll {
  0% {
    transform: translate(0px, 0px);
  }

  100% {
    transform: translate(0px, -353px);
  }
}

之上便是Css3完成无缝拼接翻转防抖的详尽內容,大量有关CSS3 无缝拼接翻转 防抖的材料请关心脚本制作之家其他有关文章内容!