css动画在微信失效

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  animation: example 5s infinite;
}

div:nth-child(2) {
  animation-delay: 1s;
}

div:nth-child(3) {
  animation-delay: 2s;
}

div:nth-child(4) {
  animation-delay: 3s;
}

div:nth-child(5) {
  animation-delay: 4s;
}

/* 添加浏览器前缀 */
div {
  -webkit-animation: example 5s infinite;
  animation: example 5s infinite;
}

div:nth-child(2) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

/* 以此类推，为其他动画效果添加前缀 */