Я создаю предварительный загрузчик в CSS. Это в основном 3 точки, ритмично растущие. Прелоадер выглядит как на картинке ниже.
Чтобы создать этот прелоадер, я создал коробку с border-radius:50%;, чтобы она стала круглой. Затем использовали псевдоэлементы ::after и ::before, чтобы создать еще один идентичный вид двух окружностей. Средний круг является оригинальным. Два других круга являются псевдоэлементами, поэтому они становятся дочерними элементами оригинала. Есть анимация, которая масштабирует три шара. Псевдоэлемент наследует анимацию от родителя. Я хочу, чтобы псевдоэлементы запускали анимацию немного позже, чем родитель.
.preloader{
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
position: relative;
margin: 20px;
animation: resize 2s linear infinite;
}
.preloader::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: red;
border-radius: inherit;
left: -15px;
}
.preloader::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: red;
border-radius: inherit;
left: 15px;
}
Обратите внимание, что я использовал анимацию, называемую resize, в классе preloader.
animation: resize 2s linear infinite;
Изменение размера В анимации используется свойство transform для увеличения и уменьшения размера предварительного загрузчика.
@keyframes resize{
50%{
transform: scale(1.2);
}
}
Теперь, когда этот класс тестируется в браузере, все три шара масштабируются с одинаковой скоростью. Но мне нужно, чтобы второй и третий шары были маленькими относительно первого шара, когда анимация начинается, и когда анимация продолжается, все шары должны ритмично масштабироваться, как показано ниже.
Я знаю, что все увеличивается с той же скоростью без создания желаемого эффект состоит в том, что все три шара запускают анимацию одновременно. Поэтому я добавил animation-delay: 1s; к псевдоэлементу до и animation-delay: 3s; к после. Но это ничего не сделало. Я предполагаю, что это потому, что псевдоэлементы наследуют все свойства родительских элементов, поэтому псевдоэлементы animation-delay работают на другом уровне.
Есть ли какой-нибудь метод, позволяющий псевдоэлементам запускать анимацию немного позже, чем родительский элемент , Это возможно, когда я использую три отдельных класса без использования псевдоэлемента, но я хочу знать, возможно ли это с псевдоэлементами, потому что мне нужно добавить только один элемент <div>, когда я использую псевдо-классы.