MrPHP MrPHP - 2 months ago 11
CSS Question

CSS keyframe animate border issue

I'm trying to animate smoothly some css triangles, I have this:

but nothing happen's - can anyone point me in the right direction please.

Thanks:

.angle-1 {
position: absolute; bottom: 0;
width: 0; height: 0;
border-style: solid;
border-width: 200px 0 0 1440px;
border-color: transparent transparent transparent #007bff;
opacity: 0.7;
-webkit-animation: moveangle1 2s infinite;
-moz-animation: moveangle1 2s infinite;
-o-animation: moveangle1 2s infinite;
animation: moveangle1 2s infinite;
}
@keyframes moveangle1,
@-o-keyframes moveangle1,
@-moz-keyframes moveangle1,
@-webkit-keyframes moveangle1 {
0% { border-width: 200px 0 0 1440px; opacity: 0.7; }
100% { border-width: 400px 0 0 1000px; opacity: 0.4; }
}


Here is an example: https://jsfiddle.net/sp2emgtc/

Answer

You cannot combine vendor prefixed keyframe statements into a single rule.

They must be stated separately.

.angle-1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 200px 0 0 1440px;
  border-color: transparent transparent transparent #007bff;
  opacity: 0.7;
  -webkit-animation: moveangle1 2s infinite;
  animation: moveangle1 2s infinite;
}
@-webkit-keyframes moveangle1 {
  0% {
    border-width: 200px 0 0 1440px;
    opacity: 0.7;
  }
  100% {
    border-width: 400px 0 0 1000px;
    opacity: 0.4;
  }
}
@keyframes moveangle1 {
  0% {
    border-width: 200px 0 0 1440px;
    opacity: 0.7;
  }
  100% {
    border-width: 400px 0 0 1000px;
    opacity: 0.4;
  }
}
<div class="angle-1">

</div>

Comments