[performance] better skeleton blink effect

1

like this:

.skeleton-effect-blink {
overflow: hidden;
position: relative;
}
.skeleton-effect-blink::after {
content: ‘’;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100vw);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
animation: skeleton-effect-blink 1.5s infinite;
}

keyframes:

@keyframes skeleton-effect-blink {
100% {
transform: translateX(100vw);
}
}

2

How and why is it better? :slight_smile:

3

here is benchmarks of these three properties:

animating position (current f7’s):

animating transform (with percentage -> example above BUT with percentage (100%)):

animating transform (with viewport -> my example above):


as i said before, i don’t know what’s wrong with animating transforms by percentage!