PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

A different animation option for pulsing record icons

Browse source
This commit is contained in:
Travis Ralston 2021-04-14 15:10:57 -06:00
parent e77d3bea04
commit 595225b98b
1 changed files with 5 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
res/css/views/rooms/_VoiceRecordComposerTile.scss
View file

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