Web Animations with HTML and CSS

Photo by Florian Olivo on Unsplash

Hello!

If you are interested in developing websites, you need to learn how to make your website more attractive and user-friendly. So, this article is for you!

Introduction

Compared to the past, many things have changed up to now. Accordingly, web developers pay attention to add visual experiences to their websites instead of just displaying information to the user without grabbing their attention.

Because of the natural reflection of the human eye, developers have revealed that human beings tend to pay more attention to moving objects. By adding visual experiences to the websites, developers can keep users on their website, and also, it is important to highlight important areas/information on the website.

What is web animation?

Making things move on the web is simply called web animation. Web animations can be used on all kinds of web pages. They can be small web animations when a visitor scrolls over a website to draw attention to an element, an animation showing a product, or a promotional web animation that shows something interesting and enjoyable.

As mentioned above, Web animation can be used to draw attention to things, engage people more effectively and communicate more clearly. It can engage people more than just a static web page and hold them to attention. Web animation should be smooth, meaningful, and support the visitor’s journey.

Currently, there are hundreds of libraries, tools, and plugins that can be used to create animations that range from simple to complex. With CSS Animation, it becomes unnecessary to make use of plugins that slow down your website speed for animations that can be done easily with CSS.

We can identify another animation type called Transitions. CSS transitions are also animation. You have the ability to change the appearance and behavior of an element with CSS transitions whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.

In this article, I will be showing you some animations and transitions that can be achieved with HTML and CSS.

What CSS properties can I animate?

When you are adding an animation, you must know about how to animate, and what to animate on the web.

Some CSS properties are animatable. It means can be used in animations and transitions. These are properties that can change gradually from one value to another, such as size, color, numbers, shape, percentage, etc.

We can animate properties like background, background-color, border color, filter, flex, and font.

CSS animations

You must first specify some keyframes for the animation in order to use CSS animation. At certain times, keyframes hold the styles that the element will have. For proper understanding, I will be explaining the basic properties we will be using.

@keyframes

We use keyframes to indicate the start and end of the animation. It is composed of three basic things:

· Animation name

· Animation stage

· Animation style or CSS properties

Screenshot by author

Animation properties

Once the @keyframes are defined, the animation properties must be added in order for your animation to function.

This is primarily used to define how the animation should happen. The animation properties are added to the CSS selectors (or elements) that you want to animate.

Two properties are very essential to notice how the animation takes effect. They are the animation-name and the animation-duration.

There are other properties like:

• animation-timing-function: Defines the speed curve or pace of the animation. You can specify the timing with the following predefined timing options: ease, linear, ease-in, ease-out, ease-in-out, initial, inherit.
• animation-delay: This property defines when the animation will start. The value is defined in seconds (s) or milliseconds (ms).
• animation-iteration-count: This property specifies the number of times an animation should be played.
• animation-direction: This CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
• animation-fill-mode: This property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
• animation-play-state: This property specifies whether the animation is running or paused.

Example

Example using animation properties

CSS

div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

HTML

<div></div>

CSS transitions

There are so many different kinds of transitions that are very well-used in websites and play a very important role in user experience.

As mentioned, an element must have a change in status for a transition to take place, and different styles must be identified for each state. The easiest way to determine styles for different states is by using pseudo-classes, :hover, :focus, :active, and :target.

Few of them:

· Hover

The :hover selector is used to select elements when you mouse over them. This way, it has the ability to catch users’ attention as soon as they hover over an item. It is a useful way to show which elements are clickable.

I have shown some example hover pattern we can use for links below.

CSS Syntax

:hover {
 css declarations;
 }

Link hover

Example 1

Link hover example

CSS

a.ex1:hover {color: red;}
a.ex2:hover {font-size: 150%;}
a.ex3:hover {background: yellow;}
a.ex4:hover {font-family: cursive;}
a.ex5:hover {text-decoration: none;}

HTML

<p><a class=”ex1" href=”default.asp”>This link changes color</a></p>
<p><a class=”ex2" href=”default.asp”>This link changes font-size</a></p>
<p><a class=”ex3" href=”default.asp”>This link changes background-color</a></p>
<p><a class=”ex4" href=”default.asp”>This link changes font-family</a></p>
<p><a class=”ex5" href=”default.asp”>This link changes text-decoration</a></p>

Example 2

Link hover example 2 (Navigation bar link hover pattern)

CSS

ul li{
list-style: none;
}
.navigation-bar{width:100%;
height:100px;background: rgba(117, 113, 113,1);
padding: 0 5px;
font-size: 25px;
font-weight: 700;
padding-top: 10px;
}
.navigation-bar li{margin: 5px 5px;
display: inline-block;
list-style: none;
}
.navigation-bar li a{
color:white;
text-decoration: none;
}
.cool-link::after{
content: ‘’;
display: block;
width: 0px;
height: 2px;
background-color: #fff;
transition: width .3s;
}
.cool-link:hover::after{
width: 100%;
transition: width .3s;
}
.nav-right{width: 55%;font-family: ‘Lobster Two’, cursive;float: right;}
.nav-right ul li {padding: 0px 2px; text-align: center;}
.nav-right ul li:last-child{border-right: none;}

HTML

<div class=”navigation-bar”>
<div class=”nav-right”>
<ul>
<li><a href=”#” class=”cool-link”>Home</a></li>
<li><a href=”#” class=”cool-link”>About Us</a></li>
<li><a href=”#” class=”cool-link”>Portfolio</a></li>
<li><a href=”#” class=”coollink”>Mobile Apps</a></li>
<li><a href=”#” class=”cool-link”>Contact Us</a></li>
<li><a href=”#” class=”cool-link”>Sign Up</a></li>
</ul>
</div><! — nav-right ->
</div><! — navigation-bar ->

Image hover

Example

Image hover example

CSS

.social ul{
list-style: none;
}
.social ul li{
display:inline-block;
padding: 5px 5px 5px 20px ;
}
.social ul li img:hover{
transform: scale(1.2);
}

HTML

<div class=”social”>
<ul>
<li><a href=”#”><img src=”facebook.png” width=”30px” height=”30px” ></a></li>
<li><a href=”#”><img src=”twitter.png” width=”30px” height=”30px” ></a></li>
<li><a href=”#”><img src=”linkedin.png” width=”30px” height=”30px” ></a></li>
<li><a href=”#”><img src=”instagram.png” width=”30px” height=”30px” ></a></li>
<li><a href=”#”><img src=”youtube.png” width=”30px” height=”30px” ></a></li>
</ul>
</div><! — social ->

· Tooltips

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.

In other words, it is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI).

Example (Fade in Tooltip)

Fade in tooltip (animation)

CSS

.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted black;
color:deepskyblue;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip — takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

HTML

<div class=”tooltip”>Hover over me
<span class=”tooltiptext”>Tooltip text</span>
</div>

· Menus

In UI/UX, animations on menus play a great role. Menus are types of animations that amaze and keep the user interactive so that all the content can be seen throughout the page.

· Loading

Loading is very important because it helps keep the user entertained during the loading time. Users are also informed of the progress level, or how much time is left until a load is complete.

Conclusion

In this article, I have shown you just a few things about web animation that you need to know. Remember, this is a very wide-ranging topic, but I know you have seen the importance of animation and why you should consider using CSS animation for your projects. Hope you learn something useful!💖