浏览器中的CSS旋转/动画差异

时间：2017-09-03 11:45:00

标签： html css

我有一个问题是动画一些图像的旋转：MS Edge，IE和Safari。

在Chrome，Firefox和Opera中，动画似乎运行正常：卡片旋转显示两侧，并且在悬停动画时停止。

在MS Edge上，动画在几秒钟后轻弹，图像之间的变换和z-index变化有差异，并且在旋转期间开始显示“另一面”。 ---在悬停时，动画停止，但在动画返回动画再次轻弹后鼠标停止。

在IE中，悬停似乎无法正常工作。我相信这里的问题是z-index没有改变并在顶部显示背面图像动画。鼠标移出时会产生奇怪的半卡图片。

在Safari中，它看起来太奇怪了，根本不起作用。

有人可以帮忙吗？

由于

<body>
  <style>
    li {
      display: inline-block;
      border: 1px solid black;
    }
    
    .panel {
      width: 128px;
      height: 128px;
      margin: auto;
      position: relative;
    }
    
    .card {
      width: 100%;
      height: 100%;
      -o-transition: all .5s;
      -ms-transition: all .5s;
      -moz-transition: all .5s;
      -webkit-transition: all .5s;
      transition: all .5s;
    }
    
    .front {
      background-size: contain;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 3000;
      -webkit-animation: CardFlipFront 2.5s linear infinite;
      -moz-animation: CardFlipFront 2.5s linear infinite;
      -ms-animation: CardFlipFront 2.5s linear infinite;
      animation: CardFlipFront 2.5s linear infinite;
    }
    
    .back {
      background-size: contain;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;
      -webkit-transform: rotateY(-180deg);
      -ms-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
      -webkit-animation: CardFlipBack 2.5s linear infinite;
      -moz-animation: CardFlipBack 2.5s linear infinite;
      -ms-animation: CardFlipBack 2.5s linear infinite;
      animation: CardFlipBack 2.5s linear infinite;
    }
    
    .panel:hover .front {
      z-index: 4000;
      transition: 0s;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -webkit-animation: none;
      transform: rotateY(0deg);
    }
    
    .panel:hover .back {
      z-index: 4000;
      transition: 0s;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -webkit-animation: none;
      transform: rotateY(0deg);
    }
    /* Animation Webkit  */
    
    @-webkit-keyframes CardFlipFront {
      0% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
      }
      50% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      100% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
      }
    }
    
    @-webkit-keyframes CardFlipBack {
      0% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
      50% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }
      100% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
    }
    /* Animation Mozila */
    
    @-moz-keyframes CardFlipFront {
      0% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -moz-transform: rotateY(0);
        transform: rotateY(0);
      }
      50% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      100% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -moz-transform: rotateY(0);
        transform: rotateY(0);
      }
    }
    
    @-moz-keyframes CardFlipBack {
      0% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -moz-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
      50% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -moz-transform: rotateY(0deg);
        transform: rotateY(0deg);
      }
      100% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -moz-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
      }
    }
    /* Animation MS */
    
    @keyframes CardFlipFront {
      0% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -ms-transform: rotateY(0);
        transform: rotateY(0);
      }
      50% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      100% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        -ms-transform: rotateY(0);
        transform: rotateY(0);
      }
    }
    
    @keyframes CardFlipBack {
      0% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        transform: rotateY(-180deg);
      }
      50% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3000;
        transform: rotateY(0deg);
      }
      100% {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 1;
        transform: rotateY(-180deg);
      }
    }
    
    #Card_1 .front {
      background-image: url('http://lorempixel.com/128/128/abstract/3/Dummy-Text/');
    }
    
    #Card_1 .back {
      background-image: url('http://lorempixel.com/128/128/animals/1/Dummy-Text/');
    }
    
    #Card_2 .front {
      background-image: url('http://lorempixel.com/128/128/people/2/Dummy-Text/');
    }
    
    #Card_2 .back {
      background-image: url('http://lorempixel.com/128/128/food/2/Dummy-Text/');
    }
    
    #Card_3 .front {
      background-image: url('http://lorempixel.com/128/128/people/4/Dummy-Text/');
    }
    
    #Card_3 .back {
      background-image: url('http://lorempixel.com/128/128/transport/3/Dummy-Text/');
    }
  </style>
  <div id="cards" align="center">
    <ul>
      <li>
        <div>
          <a href="#">
            <h1>Card 1</h1>
            <h2>Card Name</h2>
            <div id="Card_1" class="panel">
              <div class="front card"></div>
              <div class="back card"></div>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a href="#">
            <h1>Card 2</h1>
            <h2>Card Name</h2>
            <div id="Card_2" class="panel">
              <div class="front card"></div>
              <div class="back card"></div>
            </div>
          </a>
        </div>
      </li>
      <li>
        <div>
          <a href="#">
            <h1>Card 3</h1>
            <h2>Card Name</h2>
            <div id="Card_3" class="panel">
              <div class="front card"></div>
              <div class="back card"></div>
            </div>
          </a>
        </div>
      </li>
    </ul>
  </div>
</body>

Codepen here

0 个答案:

没有答案
相关问题
最新问题