Question

我正在使用transform：translate（％here）;动画圆形过渡。基本上我连续有3个项目，我转移第一个和第三个。除了在safari和移动设备中，代码工作正常。在safari中，转换：translate（％here）值似乎是a）不正确且动画变得狂野，b）动画甚至不会启动，直到你切换标签为例。这是代码和DEMO

HTML
<html>
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0">
        <link rel="stylesheet" href="anim.css">
    </head>

    <body>

                <div class="svg-wrapper">
                  <div class="svg-container second">

                <object class="tape tape-1 center"  width="15%" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/newstuff/circles3.svg"></object>
                <object class="tape tape-2 center"  width="15%" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/newstuff/circles3.svg"></object>
                <object class="tape tape-3 center"  width="15%" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/newstuff/circles3.svg"></object>

                  </div>
              </div>

    </body>
</html>

CSS:

.tape-1.center{
    left:12%;
    width:15%;
       -webkit-animation: slide-down 3.9s ease;
    -moz-animation: slide-down 3.9s ease;
    -o-animation: slide-down 3.9s ease;
    animation: slide-down 3.9s ease;
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;}
.tape-2.center{

    /*-webkit-animation: slide-in-2 3.9s ease;*/
    /*animation-iteration-count: infinite;*/
    transform: translateX(284%);
    -webkit-animation-iteration-count: infinite;  
}
.tape-3.center{
    left:73.3366%;
    width:15%;
    -webkit-transform-origin: 50%;
    -webkit-animation: slide-up 3.9s ease;
    -moz-animation: slide-up 3.9s ease;
    -o-animation: slide-up 3.9s ease;
    animation: slide-up 3.9s ease;
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;
}


@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);


  }
  33.3% {
    /*transform: translateY(105%);*/
    -webkit-transform: translateY(105%);
    -moz-transform: translateY(105%);
    -ms-transform: translateY(105%);
    -o-transform: translateY(105%);
    transform: translateY(105%);
  }
  66.6%{

        /*transform: translateX(490%);
        transform: translateY(105%);*/
        /*transform: translate(410.9%,105%);*/

    -webkit-transform: translate(410.9%,105%);
    -moz-transform: translate(410.9%,105%);
    -ms-transform: translate(410.9%,105%);
    -o-transform: translate(410.9%,105%);
    transform: translate(410.9%,105%);

    }
  100% {

    /*transform: translate(410.9%,0%);*/

    -webkit-transform: translate(410.9%,0%);
    -moz-transform: translate(410.9%,0%);
    -ms-transform: translate(410.9%,0%);
    -o-transform: translate(410.9%,0%);
    transform: translate(410.9%,0%);
  }
}

@-webkit-keyframes slide-up {
  0% {
    transform: translate(0%,0%);
  }
  33.3% {
    transform: translateY(-105%);

  }
  66.6%{
        transform: translate(-410.7%,-105%);
    }
  100% {
    transform: translate(-410.7%,0%);
  }
}

/*CONTAINER DATA*/
.svg-wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.svg-wrapper:after {
  padding-top: 80.7%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.svg-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: red;
  /* let's see it! */
  color: white;
    border-radius: 5px;
    overflow: hidden;
    -webkit-animation: tape-1
}

.tape{
    position: absolute;
    top:34.5%;  

}

只需复制粘贴并替换data="assets/piece.svg" 在您的文件系统上有一些svg文件。

我不确定这种行为的原因是什么。如果我之间切换标签并返回到此代码，则动画正在运行。如果我锁定手机并将其解锁，动画会神奇地开始工作。我错过了哪些想法？

transform：translate（）在safari中表现不正确

0 个答案: