Animating distance with the power of animate.css

Question

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below the viewport. I hope this explanation makes sense.

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<div id="login">
  <div class="row animated fadeInDown">
    <img src="logo.png"/>
    <input type="text">
    <input type="password">
  </div>
</div>

html css animation animate.css

Answer 1

Answer №1

Replace the default fadeInDown animation with any animation of your choice.
By examining the source on GitHub - animate.css/source/fading_entrances/fadeInDown.css, you'll notice it's a basic @keyframes rule. Simply replicate it and modify the transform property to fit your requirements.

In this scenario, you would do something like this:

transform: translate3d(0, -20px, 0);

For example, here is how you can change the appearance of the fadeInDown animation to go from left to right instead of top to bottom, even though it may not make much sense, just to demonstrate that customization is possible.
You could also create a custom build and include your own animations or a utility class to adjust the positioning.

@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css');

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

<div id="login">
  <div class="row animated fadeInDown">
    <input type="text">
    <input type="password">
  </div>
</div>

Answer 2

Replace the default fadeInDown animation with any animation of your choice.
By examining the source on GitHub - animate.css/source/fading_entrances/fadeInDown.css, you'll notice it's a basic @keyframes rule. Simply replicate it and modify the transform property to fit your requirements.

In this scenario, you would do something like this:

transform: translate3d(0, -20px, 0);

For example, here is how you can change the appearance of the fadeInDown animation to go from left to right instead of top to bottom, even though it may not make much sense, just to demonstrate that customization is possible.
You could also create a custom build and include your own animations or a utility class to adjust the positioning.

@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css');

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

<div id="login">
  <div class="row animated fadeInDown">
    <input type="text">
    <input type="password">
  </div>
</div>

Animating distance with the power of animate.css

Answer №1

Similar questions

CSS background image referencing in React to the public folder's path

What is the best way to incorporate a custom modal created with HTML/CSS into my Bootstrap website?

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

Create an HTML component that expands to fill any leftover space on the page, without using flex

Tips for utilizing an event listener for a submission button

Middle align an absolutely positioned block within a table cell vertically

Extract HTML href links that correspond to a specific string from a given list of strings using Beautiful Soup

What steps are needed to create a hover box that appears on the right side of my div?

Is it possible to align the second "navbar" div inline with the first "navbar" div?

I am having trouble with the hover feature on the image tag. Does anyone know how to troubleshoot this issue?

Creating a Circular Design with a Centered Line and Text Above and Below using Qualtrics (HTML/CSS/Java)

CSS: Is it possible to make a div even smaller than the invisible padding of a font?

Find out the index of a div within an array

Creating CSS style rules for aligning table column headers in JavaFXML

Utilizing conditional statements like if/else and for loops within a switch statement in JavaScript allows for

The font size varies depending on the language being used

Dots are used to indicate overflow of title in React Material UI CardHeader

Load iframe once to display on multiple HTML pages

Incorporate an HTML form into the primary HTML webpage using AngularJS application technique

What could be causing appendChild to malfunction?