Vendor prefixes for animation property?

[impressivewebs]

According to Can I use, there are a few edge cases where the webkit prefixes are still needed for cross-browser animations with CSS. I wonder if it would be better to include the webkit prefixes in the CSS example. Two examples are UC Browser for Android and any version of Safari on Windows.

[bryanbraun]

Thanks @impressivewebs... that makes a lot of sense to me. Maybe we document why we're including them like this?

ball {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #16A1DC;

  animation-name: bounce;
  animation-duration: 0.575s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.6,0.08,0.8,.6);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 160px, 0); }
}

/* Vendor prefixes -- adds support for the browsers that need it */
/* See http://caniuse.com/#feat=css-animation for support matrix */
ball {
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 0.575s;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: cubic-bezier(.6,0.08,0.8,.6);
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
  from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);     }
  to   { -webkit-transform: translate3d(0, 160px, 0); transform: translate3d(0, 160px, 0); }
}