CODEWITHSUNDEEP
cssanimation
MrPHP
MrPHP

Reputation: 972

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/

Upvotes: 0

Views: 1621

Answers (1)

Paulie_D
Paulie_D

Reputation: 114980

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>

Upvotes: 2

Related Questions