how to join two table in codeigniter easily[updated] | ci_model | ci_controller | codeigniter 3 -datainflow
FadeInDown animation in webpage
Hi, guys. Nowadays we always try to make our website more attractive and user-friendly, that’s why we use some tricky ticks like animation, font styling etc. And most probably animation is used heavily in any site or apps, and sometimes we need to use it for changing the looking style of our site.
In this article, I will show you how to use fadeInDown animation in any image or any text easily. Now follow my step.
Step 1:
Now create an animate.css file and make it with the following code.
.animate { -webkit-animation-duration: 5s; animation-duration: 3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; }
Step 2:
Attach the animate.css stylssheet in your site inside the head tag.
Step 3:
Now use fadeInDown animation like I have done in the bellow.
<!-- Code Start --> <p style="text-align: center;font-size:35px;" class="animate fadeInDown">Fade In Down Animation</p> <p style="text-align: center;" class="animate fadeInDown"><span style="font-size: 35px;"><i class="fa fa-angle-double-down"></i></span></p> <!-- Code End -->
Output :
Fade In Down Animation
Related posts