[edit] banner text animation

aplus#6
tribikram 2 years ago committed by Mahesh Sharma
parent a016966933
commit de651972f3
  1. 35
      public/frontend/css/style.css
  2. 2
      resources/views/welcome.blade.php

@ -227,22 +227,24 @@ Responsive Codes
top: 40%;
left: 10%;
visibility: hidden;
animation: 4s anim-lineUp ease-out;
animation: 6s anim-lineUp ease-out;
}
.banner-section .banner-description-two{
position: absolute;
top: 40%;
left: 10%;
top: 30%;
left: 26%;
padding-right: 30%;
visibility: hidden;
animation: 3s anim-lineUp ease-out;
animation-delay: 6s;
text-align: center;
animation: 6s anim-lineDown ease-out;
animation-delay: 4s;
}
.banner-section .banner-description-three{
position: absolute;
top: 40%;
left: 10%;
visibility: hidden;
animation: 4s anim-lineUp ease-out;
animation: 5s anim-lineUp ease-out;
animation-delay: 8s;
}
.banner-description h2, .banner-description-two h2, .banner-description-three h2{
@ -272,6 +274,27 @@ Responsive Codes
transform: translateX(0%);
}
}
@keyframes anim-lineDown {
0% {
opacity: 0;
transform: translateY(-50%);
visibility: visible;
}
20% {
opacity: 0;
visibility: visible;
}
50% {
opacity: 1;
visibility: visible;
transform: translateY(0%);
}
100% {
opacity: 0;
visibility: visible;
transform: translateY(0%);
}
}
.banner-description h3, .banner-description-two h3, .banner-description-three h3{
font-weight: 700;
font-size: 42px;

@ -22,7 +22,7 @@
<p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
</div>
<div class="banner-description-three">
<h2>Our pathway will </h2>
<h2>Lorem ipsum </h2>
<h3>help you build a secure future in Australia </h3>
<p>Let us find you a work placement and secure your permanent residency in just 4 simple steps.</p>
</div>

Loading…
Cancel
Save