关键帧动画工作在Chrome和Edge,但不是Firefox

2022-01-29 09:51:13 标签 htmlcsscross-browsercss-animations

你好,我是相当新的风格和已经看到相关的问题,但没有能够从他们的答案提取我自己的解决方案。我希望有人能告诉我为什么这个旋转木马在Chrome和Edge上工作,但不是Firefox。我尝试用-moz前缀复制几乎所有的CSS声明,但没有任何明显的影响。

不那么重要的是,我只能通过瞄准导航按钮的id来动画导航按钮。最初针对他们班级的第一个孩子没有效果

这个提琴演示了不希望看到的行为:https://jsfiddle。net/gharyiey/8h1tLxgo/42/

如果你对“carousel_snapper”div应用颜色,你可以看到它实际上是动画的,但包含img的相邻div不是。

非常感谢任何帮助……

CSS

@keyframes indicate {
  0%, 70% {
    background-color: #fff;
  }
  70%, 100% {
    background-color: #333;
  }
}
@keyframes tonext {
  75% {
    left: 0%;
  }
  95% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  99% {
    left: 0%;
  }
}
@keyframes tostart {
  75% {
    left: 0%;
  }
  95% {
    left: -300%;
  }
  98% {
    left: -300%;
  }
  99% {
    left: 0%;
  }
}
@keyframes snap {
  96% {
    scroll-snap-align: center;
  }
  97% {
    scroll-snap-align: none;
  }
  99% {
    scroll-snap-align: none;
  }
  100% {
    scroll-snap-align: center;
  }
}
* {
  box-sizing: border-box;
  scrollbar-color: transparent transparent; /*thumb and track color*/ 
  scrollbar-width: 0px;
}
*::-webkit-scrollbar {
  width: 0;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}
.carousel > ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.carousel {
  position: relative;
  filter: drop-shadow(0 0 10px #0003);
  perspective: 100px;
}
.carousel__viewport {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.carousel__slide {
  position: relative;
  flex: 0 0 100%;
}
.carousel__slide::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -40%, 70px);
  color: #fff;
  font-size: 2em;
}
.carousel__snapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  /*background-color: greenyellow;  <-- UNCOMMENT TO SEE ANIMATED DIV*/
}
@media (hover: hover) {
  .carousel__snapper {
    animation-name: snap, tonext;
    animation-timing-function: ease;
    animation-duration: 4100ms;
    animation-iteration-count: infinite;
  }
  #nav1 {
    animation: indicate 12300ms infinite -1000ms;
  }
  #nav2 {
    animation: indicate 12300ms infinite 3100ms;
  }
  #nav3 {
    animation: indicate 12300ms infinite 7200ms;
  }
  .carousel__slide:last-child .carousel__snapper {
    animation-name: tostart, snap;
  }
}
.carousel:hover .carousel__snapper,
.carousel:focus-within .carousel__snapper {
  animation-play-state: paused;
}
.carousel:hover #nav1,
.carousel:focus-within #nav1 {
  animation-play-state: paused;
}
.carousel:hover #nav2,
.carousel:focus-within #nav2 {
  animation-play-state: paused;
}
.carousel:hover #nav3,
.carousel:focus-within #nav3 {
  animation-play-state: paused;
}
.carousel__navigation {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}
.carousel__navigation-list,
.carousel__navigation-item {
  display: inline-block;
}
.carousel__navigation-button {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  background-clip: content-box;
  border: 0.25rem solid transparent;
  border-radius: 50%;
  font-size: 0;
  transition: transform 0.1s;
}
.dummy_img {
  height:290px;
  width:640px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.img_text {
  text-align: center;
  vertical-align: middle;
  line-height: 290px;
}

超文本标记语言

<h1 style="text-align:center">PURE CSS/HTML CAROUSEL WITH ANIMATED NAV</h1>
<section class="carousel" aria-label="Gallery">
  <ol class="carousel__viewport">
    <li id="carousel__slide1" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <div class="dummy_img">
        <h1 class="img_text">IMAGE 1</h1>
          <!--<a href="">
            <img src="img1.jpg" alt="alt_tag_1">
          </a>-->
      </div>
    </li>
    <li id="carousel__slide2" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <div class="dummy_img">
        <h1 class="img_text">IMAGE 2</h1>
          <!--<a href="">
            <img src="img2.jpg" alt="alt_tag_2">
          </a>-->
      </div>
    </li>
    <li id="carousel__slide3" tabindex="0" class="carousel__slide">
      <div class="carousel__snapper"></div>
      <div class="dummy_img">
        <h1 class="img_text">IMAGE 3</h1>
          <!--<a href="">
            <img src="img3.jpg" alt="alt_tag_3">
          </a>-->
      </div>
    </li>
  </ol>
  <aside class="carousel__navigation">
    <ol class="carousel__navigation-list">
      <li class="carousel__navigation-item">
        <a href="#carousel__slide1" class="carousel__navigation-button" id="nav1">Go to slide 1</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide2" class="carousel__navigation-button" id="nav2">Go to slide 2</a>
      </li>
      <li class="carousel__navigation-item">
        <a href="#carousel__slide3" class="carousel__navigation-button" id="nav3">Go to slide 3</a>
      </li>
    </ol>
  </aside>
</section>
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码