使元素脈衝的顏色連續有角

Question

我試圖使按鈕脈衝的顏色從其當前顏色，例如＃ed8c55，變成純白色，並返回到原始顏色， 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> 

View my codepen here

/EDIT ------------------

OG Answer ---

@-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+ */ 
    } 

而且這將持續在兩種顏色之間循環。

You can view my code pen on it here.