I've attempted to include transitions in every aspect, however, none of the animations seem to be working. This behavior is quite peculiar to me. What could be causing this issue? Apologies for the placeholder text, but I needed to ask the question. At this moment, I am uncertain about any additional information or explanations that could be provided.
I tried to put transition everywhere, but not one animation does not work, for me, this is strange behavior. What could it be connected with? sorry for the text fish, otherwise the question was not asked. I really don't know what else can be explained or added here.
.background[data-v-0d076cda] {
background-image: url("https://static-cse.canva.com/blob/241536/%D0%9E%D1%81%D0%B5%D0%BD%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D0%BE%D0%B8-%D0%BD%D0%B0-%D1%80%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9-%D1%81%D1%82%D0%BE%D0%BB-%D0%BE%D1%82%D1%80%D0%B0%D0%B6%D0%B5%D0%D0%BD%D0%B8%D0%B5.png");
height: 880px;
width: 100%;
display: flex;
justify-content: space-between;
color: white;
}
.background .block[data-v-0d076cda] {
border-right: 1px solid white;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
flex-basis: 300px;
padding-left: 60px;
transition: all 1s ease 0.2s;
}
.background .block .h3[data-v-0d076cda] {
color: white;
}
.background .block .wrap[data-v-0d076cda] {
margin-top: auto;
transition: all 1s ease 0.2s;
}
.background .block p[data-v-0d076cda] {
color: rgba(255, 255, 255, 0.5);
}
.background .block .desc[data-v-0d076cda] {
color: white;
transition: all 2s ease;
margin-bottom: 106px;
transition: all 1s ease 0.2s;
}
.background .block .desc span[data-v-0d076cda] {
display: none;
transition: all 1s ease 0.2s;
}
.background .block:hover .wrap[data-v-0d076cda] {
margin-top: 106px;
margin-bottom: auto;
}
.background .block:hover .desc span[data-v-0d076cda] {
display: block;
}
.background.block[data-v-0d076cda]:last-child {
border-right: none;
}<div class="background" data-v-0d076cda="" data-v-2a183b29="">
<div class="block" data-v-0d076cda="">
<div class="wrap" data-v-0d076cda="">
<h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Многолетний опыт</h3>
<p data-v-0d076cda="">19 лет на рынке строительства</p>
</div>
<p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
</p>
</div>
<div class="block" data-v-0d076cda="">
<div class="wrap" data-v-0d076cda="">
<h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Качество и комфорт</h3>
<p data-v-0d076cda="">в каждой детали</p>
</div>
<p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
</p>
</div>
<div class="block" data-v-0d076cda="">
<div class="wrap" data-v-0d076cda="">
<h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Настоящий кирпич</h3>
<p data-v-0d076cda="">долговечный материал</p>
</div>
<p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
</p>
</div>
<div class="block" data-v-0d076cda="">
<div class="wrap" data-v-0d076cda="">
<h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Чистая экология</h3>
<p data-v-0d076cda="">рядом Сормовский Парк</p>
</div>
<p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
</p>
</div>
</div>