Как сделать так чтобы блок исчезал увеличивающимся прозрачным кругом изнутри?

Question

[Ложка в мозге]

Добрый вечер!
Я никак не могу найти хотя бы название данной анимации, попробую описать саму анимацию.
Например у нас есть блок (content), поверх этого блока во весь экран висит ещё один абсолютно зафиксированый блок(назовём его loading):

<div class="main">
    <div class="loading">loading...</div>
    <div class="content">
    </div>
</div>

.loading{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: red;
}
.content{
    width: 100%;
    height: 100vh;
    background-color: black;
}

Так вот, как сделать так чтобы блок loading исчезал увеличивающимся прозрачным кругом изнутри? Или как нызвается данная анимация?

Comments

[Никита Соколов]

Может быть что-то типо такого? https://github.com/bmats/looney-js

[Froggyweb]

данная анимация называется @keyframes
еще есть js и GSAP, anime.js и пр.

[Erl]

Использовать keyframe анимацию и допустим на этапе 90-100% убирать блок путем opacity:0

Answer 1

[Роман Дворянов]

Если заменить бэкграунд на бордер и по окончании анимации увеличивать размер и уменьшать бордер, то может получиться похожий эффект, я накидал сыренько с размерами, но идея такая (реализовано по ховеру)