Basics of CSS Animation
Published: 2021-04-11 20:38:28

Adding animations to your HTML elements can, at first glance, seem like a daunting challenge, requiring complex javascript or jQuery functions. However, it turns out that animating text, images, or other elements can be easily accomplished using only CSS.

Below, I’ll cover a few simple ways in which any developer can add some flare and additional functionality to their website using CSS animations.

### Fading In and Out

The landing page of a website can look and feel more dynamic by fading text in and out as the user progresses through the site. To get started, you’ll need to gain some familiarity with the CSS @keyframes method.
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.To get an animation to work, you must bind the animation to an element.

Let’s look at an example:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x55aglbv8hzlzi7tospy.png)

In my stylesheet, I’ve created a @keyframes class to hold my animation, and given it a name to be referenced within the element that I want to animate. I’ve named this animation “picFadeIn”. This animation fades the image in by transitioning from 0% opacity to 100% opacity, which gradually renders this image onto the page. I can add this animation to my .img-fluid class selector by referencing the keyframe with the **animation-name** property. I can also adjust the speed of the fade by using the **animation-duration** property.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpryt38sz1r470vropun.gif)


### Adding Motion

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v592qtk4fzou3g9yil2.png)

Creating HTML elements that move across the screen can be accomplished by specifying a change in margin and width within your keyframes. Below, I’ve created a transition between two CSS states for a simple <p> tag. The text will start with a margin-left of 100%, pushing the element all the way to the right side of the page.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8dezdodz5vs9sc15bsm.png)

The second state specifies that the <p> tag will transition to a margin-left of 0%, which pushes the element back towards the left side of the screen.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sre2gnjowfs26oa3hg9x.png)

As before, I reference the “slidein” animation within the <p> selector and add a duration. Be sure to include a duration property with every animation you create. If the animation-duration property is omitted, it will default to 0 seconds, and the animation won’t actually be implemented.
Additionally, the animation-iteration-count property can be used to specify how many times you would like the animation to run. Here I’ve chosen “infinite”, which causes the animation to run continuously. The above code snippet renders to the text below, which smoothly glides from right to left and then resets.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tu543xl4p8sgy6r1k4mc.gif)


###Text Bounce

Creating text elements or logos with bounce effects can add some fun detail to the home page of your website. This effect utilizes the CSS transform property to gradually increase the size of the image, creating the effect that the image is moving towards the user on the screen.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1z7837gzraxz2bug9524.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cv994wfl9l4yquaajnon.gif)

Hopefully these quick tips will inspire you to further explore the intricate and complex world of CSS animations. With a little practice, animations can give your website an interactive and dynamic feel, and keep your users coming back for more!

Happy Coding!