关键帧动画不适用于 chrome safari 或 mozilla，但适用于歌剧、维瓦尔第和 ie

Question

我的关键帧动画不适用于 chrome、safari 或 mozilla，但适用于歌剧、维瓦尔第和 Internet Explorer （它是用 bootstrap 和 wordpress 制作的）

示例链接“http://motico.be/dienst/offleash-training/

我的少：

@keyframes gotolink {
  0% {
    transform:translateX(0px);
  }
  50% {
   transform:translateX(-20px);
  }
  100% {
    transform:translateX(0px);
  }
}

@-webkit-keyframes gotolink {
  0% {
    -webkit-transform:translateX(0px);
  }
  50% {
   -webkit-transform:translateX(-20px);
  }
  100% {
    -webkit-transform:translateX(0px);
  }
}
@-moz-keyframes gotolink {
  0% {
    -moz-transform:translateX(0px);
  }
  50% {
   -moz-transform:translateX(-20px);
  }
  100% {
    -moz-transform:translateX(0px);
  }
}

#titelveld {

    background-color:@grey;
    width:100%;
    padding:10px 0;

    h1 {
        text-align:left !important;
        font-weight:300;

    }

    a {
        margin-top: 10px;
        padding:20px 0; 
        font-size:16px;

        color:@appelblauwzeegroen;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out; 

        &:hover {
            text-decoration:none;
            color:@blue;

                span {

                    -webkit-animation-duration: 0.5s;
                    -moz-animation-duration: 0.5s;
                    animation-duration: 0.5s;
                    -webkit-animation-name: gotolink;
                    -moz-animation-name: gotolink;
                    animation-name: gotolink;

                }
        }
        &:focus {
            text-decoration:none;
        }
    }

}

html:

<section id='titelveld'>
    <div class='container'>
        <div class='row'>
            <div class='col-md-6 col-sm-6 col-xs-8'>
                <h1 class='animated fadeIn'><?php the_field('hoofdtitel'); ?></h1>
            </div>
            <div class='col-md-6 col-sm-6 col-xs-4'>
                <a href='<?php echo $_SERVER['HTTP_REFERER']; ?>' class=' pull-right animated fadeIn'><span>&lt;</span> Terug</a>
            </div>
        </div>
    </div>
</section>

Answer 1

span 必须不是 inline 的默认 display 属性

将其设置为 inline-block 可以修复它。

Codepen Demo

@keyframes gotolink {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@-webkit-keyframes gotolink {
  0% {
    -webkit-transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}
#titelveld {
  width: 100%;
  padding: 10px 0;
}
#titelveld h1 {
  text-align: left !important;
  font-weight: 300;
}
#titelveld a {
  margin-top: 10px;
  padding: 20px 0;
  font-size: 16px;
  color: green;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#titelveld a:hover {
  text-decoration: none;
  color: blue;
}
#titelveld a:hover span {
  display: inline-block;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: gotolink;
  animation-name: gotolink;
}
#titelveld a:focus {
  text-decoration: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="titelveld">
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-xs-8">
        <h1 class="animated fadeIn">Some Text</h1>
      </div>

      <div class="col-sm-6 col-xs-4">
        <a href="#" class="pull-right animated fadeIn"><span>></span>Terug</a>
      </div>
    </div>
  </div>
</section>