mirror of https://github.com/vector-im/riot-web
A different animation option for pulsing record icons
parent
e77d3bea04
commit
595225b98b
|
@ -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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue