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:
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.
Adding Motion
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
tag. The text will start with a margin-left of 100%, pushing the element all the way to the right side of the page.
The second state specifies that the
tag will transition to a margin-left of 0%, which pushes the element back towards the left side of the screen.
As before, I reference the “slidein” animation within the
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.
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.
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!
Top comments (0)