CSS Descend animation effect
CSS Descend animation
Similar to the CSS animation effect ascend we use the CSS transform transform#translate and transform#scale functions to let an HTML element descend from the virtual sky.
<style>
.descend {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: descend;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes descend {
/* We first translate our HTML element
in Y direction, to make it look like
our element begins to descend from the
sky.
Change the values as needed.
*/
0% { transform: translateY(-150%) scale(.7, .7); }
100% { transform: translateY(50%); }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence