CSS Social Media Icon Animation

Hello, friends. Today in this blog, we will share CSS animation examples. This animation is basically about icons. We add social media icons to the website so that visitors can find out more about us by visiting our social media profile. In this snippet, we have shown how to add animations to social media icons and, present them beautifully. We have a lot of videos about CSS animation on our youtube channel. If you have time, you can visit our youtube channel once. Please watch the video below before collecting this code. This video tutorial will make it easier to implement the snippet.

I hope you have watched the whole video once and understood how the animation was created using some simple terms of CSS. Here we have taken some social media icons from font-awesome. Then these icons have been styled by applying some basic CSS. We have given the span tags an animation property. We set different animation-delay values for each span so that they are animated separately. Finally, using CSS keyframes animation, we are given the desired animation.

CSS Social Media Icon Animation [ Source Code ]:

You need to create some files before using this code. One of them is an HTML file and the other is a CSS file. Then copy the source code given below and paste it into the files of your project and save it. If you have any problem with the code below, download the code from the download button below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<title>CSS Icon Animation | CSS Animation Examples</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<div class="text-area">
			<span><i class="fa fa-facebook"></i></span>
        <span><i class="fa fa-youtube"></i></span>
        <span><i class="fa fa-reddit"></i></span>
        <span><i class="fa fa-behance"></i></span>
        <span><i class="fa fa-pinterest"></i></span>
        <span><i class="fa fa-tumblr"></i></span>
		</div>
	</div>
</body>
</html>

ADD CSS:

body {
	background: linear-gradient(-45deg, blue, red);
}
.wrapper {
	display: grid;
	place-items: center;
	height: 100vh;
}
.text-area span {
	display: inline-block;
	margin: 0 15px;
	border-radius: 10px;
	width: 80px;
	height: 80px;
	background: #fff;
	text-align: center;
	color: #262626;
	opacity: 0;
	transform: translate(0, -100px) rotate(360deg) scale(0.5);
	animation: animate 5s forwards;
	transition: all .6s ease;
}
.text-area span i {
	font-size: 40px;
	line-height: 80px;
}
.text-area span:hover {
	background: #262626;
}
.text-area span:hover i {
	color: #fff;
}
.text-area span:nth-of-type(2) {
	animation-delay: .1s;
}
.text-area span:nth-of-type(3) {
	animation-delay: .2s;
}
.text-area span:nth-of-type(4) {
	animation-delay: .3s;
}
.text-area span:nth-of-type(5) {
	animation-delay: .4s;
}
.text-area span:nth-of-type(6) {
	animation-delay: .5s;
}
@keyframes animate {
	30% {
		transform: translate(0, -50px) rotate(180deg) scale(1);
	}
	60% {
		transform: translate(0, 20px) scale(.8) rotate(0deg);
	}
	100% {
		transform: translate(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}

I hope you like this simple CSS animation. If you like it, follow us on social media. Please share our articles with like-minded people. Thank you for visiting the blog.

DOWNLOAD CODE

CSS Social Media Icon Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS Social Media Icon Animation

CSS Social Media Icon Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form