How to create incoming call animation effect with CSS
How to Create an Incoming Call Animation Effect with CSS
Cascading Style Sheets (CSS) CSS enables developers to create visual effects for your web pages, making them attractive and user-friendly. CSS provides a variety of properties, such as color, flexible boxes, grids, animations, shadows, and more, that can be used to style elements, making websites attractive and user-friendly for a wide range of users.
In this article, we discussed how to use HTML and CSS to create an animated incoming call effect. To create this effect, we will use CSS animation properties and the box-shadow property.
CSS Animation
It enables developers to add animation effects, such as movement and vibration, to HTML elements, giving our web pages aesthetic value.
Grammar
animation: animation-name | animation-duration | speed;
CSS Box-Shadow Property
It allows developers to provide a dark shadow on one side and a light shadow on the other.
Syntax
box-shadow: values;
The values for this property are –
- None – Displays no shadow on the element. This is the default value.
-
Offset-X – How far horizontally from the element the shadow is positioned. Positive values of offset-X create a shadow to the right of the element. Negative values place the shadow to the left of the element.
-
Offset-Y – This determines how far the shadow is pushed vertically from the element. Positive values for Offset-Y create a shadow above the element, while negative values create a shadow below it.
-
Blur-radius – This specifies the sharpness of the shadow. A higher number results in a blurrier shadow, meaning it will appear larger and lighter.
-
Spread-radius – It specifies the size of the shadow. If its value is positive, the size increases. If it is negative, the size decreases.
-
Color – This specifies the color of the shadow.
-
Inset – This allows developers to create a shadow that makes the content of an element appear to be below its border. Therefore, it creates the shadow within the border.
Example
<!DOCTYPE html>
<html>
<head>
<style> #demo {
border: 5px solid;
padding: 10px 15px;
box-shadow: -5px -10px 0px 5px yellow;
}
</style>
</head>
<body>
<h1>The box-shadow property</h1>
<p>This is an article element with a shadow. It contains four values: offset-X (horizontal distance), offset-Y (vertical distance), spread radius, and color. </p>
</article>
</body>
</html>
Creating an incoming call animation effect
In the following example, we attempt to use CSS Font awesome icon to display a phone ringing icon.
Then, we used the box-shadow property and CSS animations to create the ringing effect. To control the order of the animation, we use @keyframes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Incoming Call Animation</title>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<style>
body{
height: 80%;
margin: 10px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
section{
position: absolute;
top: 10%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid orange;
height: 65%;
width: 40%;
}
.call{
position: relative;
background: black;
color: orange;
font-size: 35px;
font-weight: bold;
width: 70px;
height: 70px;
border-radius: 100%;
border: solid 5px black;
animation: anim 2s ease-in infinite, vibration 2s ease-in infinite;
}
.img{
position: absolute;
top: 20px;
left: 20px;
height: 60px;
width: 50px;
}
@keyframes anim {
0% {
box-shadow: 0 1px 0 4px #ffffff;
} 10%{
box-shadow: 0 1px 0 8px rgba(255, 165, 0, 1);
}
25% {
box-shadow: 0 1px 0 12px rgba(255, 210, 128, 1), 0 1px 0 16px rgba(255, 201, 102, 1);
}
50% {
box-shadow: 0 2px 5px 10px rgba(255, 184, 51, 1), 0 2px 5px 23px rgba(248, 248, 255, 1);
}
}
@keyframes vibration {
0% { transform: rotate(0deg); }
25% { transform: rotate(20deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
</style>
</head>
<body>
<section>
<div class= "call">
<i class= "fas fa-solid fa-phone img"> </i>
</div>
</section>
</body>
</html>
The incoming call icon will be displayed on the webpage. Due to the animation, a ringing effect will be observed.
Conclusion
Customers in the modern tech market demand more engagement from websites. In this regard, animation plays a crucial role in enhancing communication. The interactive nature of animation encourages user interaction and improves the user experience. If you want your website to stand out from the competition and be loved by your target audience, hiring a top-tier web development company to incorporate animation into your website will be beneficial.