移动QQ浏览器加载不了css动画

Question

我最近发现我把自己的网站在QQ上丢给朋友，发现到QQ浏览器和QQ自带浏览器都没了动画效果而手机的chrome，电脑chrome，电脑QQ浏览器却都能显示动画效果，望解决方法。。

我的网站http://gayto.top
代码如下

/*按钮样式*/
.template-a1
{
  text-decoration: none;
  color: #FFFFFF;
  font-size: 30px;
  background-color: #FFAA1B;
  box-shadow:0px 1px 3px #909090;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
  border-radius:3px;
  position: absolute;
  top: 20%;
  left: 36%;
}
/*动画*/
.template-a1:hover{
  animation:0.5s a1;
}
keyframes a1{
  0%{width:auto;}
  50%{box-shadow:0px 6px #906090;background-color:#0090FF}
  100%{padding:32px;}
}

Answer 1

大概看了一下，估计是因为你没有做浏览器的兼容，对于animation和keyframes，最好还要写一种兼容的，就是加上webkit的前缀，具体你可以看看下面的例子：
（这个例子是从animate.css总截取的）

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

另外，你的animation的语法顺序也不是很正确，建议你看看W3school的animation的语法：

animation: name duration timing-function delay iteration-count direction;

CSS3 animation 属性