A different animation option for pulsing record icons

pull/21833/head
Travis Ralston 2021-04-14 15:10:57 -06:00
parent e77d3bea04
commit 595225b98b
1 changed files with 5 additions and 11 deletions

View File

@ -54,7 +54,7 @@ limitations under the License.
&::before { &::before {
// Pulsing animation // Pulsing animation
animation: recording-pulse 1.5s infinite; animation: recording-pulse 1s infinite;
content: ''; content: '';
background-color: $voice-record-live-circle-color; background-color: $voice-record-live-circle-color;
@ -78,19 +78,13 @@ limitations under the License.
} }
@keyframes recording-pulse { @keyframes recording-pulse {
// Source: https://codepen.io/FlorinPop17/pen/drJJzK
// Same source: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/
0% { 0% {
transform: scale(0.95); opacity: 1;
box-shadow: 0 0 0 0 $voice-record-live-circle-color;
} }
70% { 65% {
transform: scale(1); opacity: 0;
box-shadow: 0 0 0 6px transparent;
} }
100% { 100% {
transform: scale(0.95); opacity: 1;
box-shadow: 0 0 0 0 transparent;
} }
} }