Created animation for title and subtitle transform translateY () with css

[Mery]

I am working on a project with vuetify I have created a background image cover over background image I have a title, subtitle and a button.

I should to created same effect animation with css:

• Firstly, I should to display title with transform translate Y() to be coming with animation

• Secondly, I should to display subtitle with transform translate Y() to be coming with animation with the same logic that first, but subtitle should, will be coming after title with some seconds.

• For button, we don’t need for anyone animation transform translate Y() just to display in the same position after subtitle with same seconds.

I have done until now to create effect animation for all three element display together, I am sharing my code:

Don’t confuse about vuetify just image like HTML+CSSPreformatted text`

<div class="hero-inner">
  <transition name="slide-fade-1" appear>
    @if ($block->input('title') != '')
    <h1 class="text-white "> {{ $block->input('title') }} </h1>
    @elseif($block->image('title_image'))
    <img class="hero-title-img" src="{!!$block->image('title_image', 'default', ['fm' => null])!!}"> @endif
  </transition>
  <transition name="slide-fade-2" appear>
    @if ($block->input('subtitle') != '')
    <h3 class="text-white  mt-15"> {{ $block->input('subtitle') }} </h3>
    @endif
  </transition>
  <transition name="slide-fade-3" appear>
    @if ($block->input('cta_label') != '')
    <v-cta link="{!!$block->input('cta_link')!!}" label="{!!$block->input('cta_label')!!}"></v-cta>
    @endif
  </transition>
</div>

.slide-fade-1-enter-active {
  transition: all .7s ease-out;
}

.slide-fade-1-enter {
  transform: translateY(200px);
  opacity: 0;
}

.slide-fade-2-enter-active {
  transition: all 1s ease-out;
}

.slide-fade-2-enter {
  transform: translateY(200px);
  opacity: 0;
}

.slide-fade-3-enter-active,
.slide-fade-3-leave-active {
  transition: opacity 1s;
}

.slide-fade-3-enter,
.slide-fade-3-leave-to
/* .fade-leave-active below version 2.1.8 */

{
  opacity: 0;
}

I am working on a project with vuetify I have created a background image cover over background image I have a title, subtitle and a button.

I should to created same effect animation with css: Firstly, I should to display title with transform translate Y() to be coming with animation

Secondly, I should to display subtitle with transform translate Y() to be coming with animation with the same logic that first, but subtitle should, will be coming after title with some seconds.

For button, we don’t need for anyone animation transform translate Y() just to display in the same position after subtitle with same seconds. I have done until now to create effect animation for all three element display together, I am sharing my code:

Don’t confuse about vuetify just image like HTML+CSS

.slide-fade-1-enter-active {
  transition: all .7s ease-out;
}

.slide-fade-1-enter {
  transform: translateY(200px);
  opacity: 0;
}

.slide-fade-2-enter-active {
  transition: all 1s ease-out;
}

.slide-fade-2-enter {
  transform: translateY(200px);
  opacity: 0;
}

.slide-fade-3-enter-active,
.slide-fade-3-leave-active {
  transition: opacity 1s;
}

.slide-fade-3-enter,
.slide-fade-3-leave-to
/* .fade-leave-active below version 2.1.8 */

{
  opacity: 0;
}

<div class="hero-inner">
  <transition name="slide-fade-1" appear>
    @if ($block->input('title') != '')
    <h1 class="text-white "> {{ $block->input('title') }} </h1>
    @elseif($block->image('title_image'))
    <img class="hero-title-img" src="{!!$block->image('title_image', 'default', ['fm' => null])!!}"> @endif
  </transition>
  <transition name="slide-fade-2" appear>
    @if ($block->input('subtitle') != '')
    <h3 class="text-white  mt-15"> {{ $block->input('subtitle') }} </h3>
    @endif
  </transition>
  <transition name="slide-fade-3" appear>
    @if ($block->input('cta_label') != '')
    <v-cta link="{!!$block->input('cta_link')!!}" label="{!!$block->input('cta_label')!!}"></v-cta>
    @endif
  </transition>
</div>

But we want to create exactly affect animation transform translate by UI/UX design in the Figma. Figma