How to build a Pulse Animation using HTML ,CSS | Pulse Animation Css
.png "How to build a Pulse Animation using HTML ,CSS | Pulse Animation Css")
Welcome to today’s tutorial. Today we are going to create a Pulse Animation. For this, we are going to use HTML, CSS and Javascript.
You need basic knowledge of CSS for this project. This tutorial is well suited for CSS intermediates. Let us get started with the project.
PULSE ANIMATION:-
CSS Pulse Animation Effect provides a pulsating effect to an element
that changes its shape and opacity. As per the time and need, different @keyframes
are used to achieve this animation. The simple yet powerful effect
makes the website more vibrant, colorful, and attractive. This animation
is completely implemented without using JavaScript.
Live server:-
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
HTML:-
Pulse animation is
commonly used to draw the attention of a user. In this snippet, we are
going to create pulse effect animation in CSS. At First, we need to
create two div tags where one is placed inside another. The container
div will be named as the wrapper. The div inside that will be named as a
box.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
CSS:-
In the CSS part, we have eliminated the default margin and padding
by setting them to zero. The background is set to black but, you can
choose whatever color you want.
After that, we aligned the wrapper div
at the center of the viewport. For that, we used absolute position value
and CSS transform property.
We gave the 'box' div a particular height
and width of 100px. Then we set the animation value for the CSS pulse
animation. Here animate is animation-name, 2s is the animation duration,
linear is the animation timing function, and infinite is the animation
iteration count value.
Inside the @keyframes at 0%, we are setting the
box-shadow opacity to 0 and, the color will be cornflower blue.
When the
animation reaches 40%, we are spreading the box shadow around the
circle by 50px so that we can see the pulse effect.
We set the same
value for 80%. When the animation reaches 100%, the box-shadow value
will go back to 0.
body {
margin: 0;
padding: 0;
background: #000;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 100px;
height: 100px;
background: cornflowerblue;
border-radius: 50%;
text-align: center;
line-height: 130px;
animation: animate 2s linear infinite;
cursor: pointer;
}
@keyframes animate {
0% {
box-shadow: 0 0 0 0 cornflowerblue;
}
40% {
box-shadow: 0 0 0 50px rgba(255, 254, 67, 0);
}
80% {
box-shadow: 0 0 0 50px rgba(255, 254, 67, 0);
}
100% {
box-shadow: 0 0 0 rgba(255, 254, 67, 0);
}
}
I hope hoped loved this blog and learnt many things at a place please
let us know your review in the comment section if you liked it please
comment below as it will give us motivation to create more blogs.
If
you faced any difficulty feel free to comment down your problems and If
you really liked it, please show your love in the comment section this
really motivates a blogger to provide more such content.
You can follow me on Instagram.
Written by @Himanshu Singh.
Post a Comment