使元素的颜色连续脉动与角度

Question

我正在尝试使按钮的颜色从当前颜色（例如 #ed8c55）脉冲到纯白色，然后返回到原始颜色，整个周期大约需要 2-3 秒。我该怎么做？

特别是，我看到这里有几个问题。一种是制作计时器并将某个变量的增量附加到颜色的值上。第二个问题是实际颜色本身。如何使用某种循环将十六进制颜色连续更改为白色并返回？

我实现了以下计算秒的计时器。我可以轻松地修改它以计算毫秒或类似的东西。

var mytimeout = null; // the current timeoutID
    $scope.counter = 0;
    // actual timer method, counts up every second
        $scope.onTimeout = function() {
        $scope.counter++;
        mytimeout = $timeout($scope.onTimeout, 1000);
    };

任何帮助，不胜感激。

Answer 1

我知道

你想要通过AngularJS制作动画，但我认为这不是适合这项工作的工具，因为它仅通过CSS即可轻松实现。我真的建议你这样做;

编辑------------------

在您评论动态添加背景颜色之后，最好的方法是通过角度和 css 关键帧对动画进行内联样式。

.CSS--

@-webkit-keyframes pulse {
  25% { background-color: #FFF; }  
}
@-moz-keyframes pulse {
  25% { background-color: #FFF; }  
}
@-o-keyframes pulse {
  25% { background-color: #FFF; }
}
@keyframes pulse { 
  25% { background-color: #FFF; } // changed to 25% to stop the sudden change to white
}
.element {
    transition: background-color 3s;
    width: 50px;
    height: 50px;
    -webkit-animation: pulse 3s infinite; /* Safari 4+ */
    -moz-animation:    pulse 3s infinite; /* Fx 5+ */
    -o-animation:      pulse 3s infinite; /* Opera 12+ */
    animation:         pulse 3s infinite; /* IE 10+, Fx 29+ */
  }

.HTML-

<div style="background-color: #ed8c55;" class="element"></div>

在此处查看我的代码笔

/编辑------------------

OG 回答---

  @-webkit-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  @-moz-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  @-o-keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  @keyframes pulse {
    0% { background-color: #ed8c55; }
    50% { background-color: #FFF; }
    100% { background-color: #ed8c55; }
  }
  .element {
    width: 50px;
    height: 50px;
    background: #ed8c55;
    -webkit-animation: pulse 3s infinite; /* Safari 4+ */
    -moz-animation:    pulse 3s infinite; /* Fx 5+ */
    -o-animation:      pulse 3s infinite; /* Opera 12+ */
    animation:         pulse 3s infinite; /* IE 10+, Fx 29+ */
  }

这将在两种颜色之间不断循环。

你可以在这里查看我的代码笔。