ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-26 16:15:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Animation timing

Browse source
This commit is contained in:
Thomas Smith 2022-09-27 16:49:18 -04:00
parent 63463841f7
commit 013b37c1f6
2 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/layouts/index.html
View file

@ -24,8 +24,8 @@
</style> </style>
<section class="hero-section"> <section class="hero-section">
<div class="gen-art animated animatedFadeInUp fadeInUp" id="gen-art-1"></div> <div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="gen-art-1"></div>
<div class="gen-art animated animatedFadeInUp fadeInUp" id="gen-art-2"></div> <div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="gen-art-2"></div>
<!--<img src="/Images/x-large-grid-hero.svg" id="hero-grid-system" alt="hero-grid-system">--> <!--<img src="/Images/x-large-grid-hero.svg" id="hero-grid-system" alt="hero-grid-system">-->
<div class="container hero-container"> <div class="container hero-container">
<div class="row"> <div class="row">
@ -35,7 +35,7 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"> <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<p class="lead hero-subhead animated animatedFadeInUp fadeInUp" style="margin-top:8px; margin-bottom: -9px;">The revolution is here. We’re calling on all open-source devs to authenticate their Github with tea.</p> <p class="lead hero-subhead animated-25 animatedFadeInUp fadeInUp" style="margin-top:8px; margin-bottom: -9px;">The revolution is here. We’re calling on all open-source devs to authenticate their Github with tea.</p>
</div> </div>
</div> </div>
</div> </div>

10
src/static/css/animations.css
View file

@ -22,7 +22,7 @@
} }
} }
.animated { .animated-5 {
animation-duration: 1s; animation-duration: 1s;
animation-delay: .5s; animation-delay: .5s;
animation-fill-mode: both; animation-fill-mode: both;
@ -30,6 +30,14 @@
-webkit-animation-fill-mode: both -webkit-animation-fill-mode: both
} }
.animated-25 {
animation-duration: 1s;
animation-delay: .25s;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: both
}
.animatedFadeInUp { .animatedFadeInUp {
opacity: 0 opacity: 0
} }