Social Icon Animation

Developer
Jitendra
Size
2,507 Kb
Views
46,552
  1. Social Icon Animation Previews
  2. Social Icon Animation HTML Codes
  3. Social Icon Animation CSS Codes
  4. Social Icon Animation JS Codes

How do I make an social icon animation?

Jump up and fill background with brand color.. What is a social icon animation? How do you make a social icon animation? This script and codes were developed by Jitendra on 04 July 2022, Monday.

Social Icon Animation Previews
IQ Test

Social Icon Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Icon Animation</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Social Icon Animation</h1>
<div id="socialicons">
<div class="socialicon">
<div class="dribbblecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-dribbble dribbble"></i>
</div>
</div>
<div class="socialicon">
<div class="facebookcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-facebook-square facebook"></i>
</div>
</div>
<div class="socialicon">
<div class="googlecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-google-plus-square google"></i>
</div>
</div>
<div class="socialicon">
<div class="flickrcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-flickr flickr"></i>
</div>
</div>
<div class="socialicon">
<div class="pinterestcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-pinterest-square pinterest"></i>
</div>
</div>
<div class="socialicon">
<div class="githubcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-github-alt github"></i>
</div>
</div>
<div class="socialicon">
<div class="linkedincolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-linkedin-square linkedin"></i>
</div>
</div>
<div class="socialicon">
<div class="youtubecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-youtube-square youtube"></i>
</div>
</div>
<div class="socialicon">
<div class="tumblrcolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-tumblr-square tumblr"></i>
</div>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Social Icon Animation - Script Codes CSS Codes

body{
background:#f5f5f5;
}
h1
{
text-align:center;
color:#dbdbdb;
font-family:arial;
text-shadow:0px 2px 2px #c1c1c1;
}
#socialicons
{
width:75%;
margin:0 auto;
overflow:auto;
}
.socialicon
{
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
background:#e4e4e4;
position:relative;
float:left;
margin:0px 0px 10px 10px ;
}
.socialiconcircle1
{
width:150px;
height:150px;
position:absolute;
left:0px;
top:100px;
-webkit-animation:fill 2s infinite;
-moz-animation:fill 2s infinite;
animation:fill 2s infinite;
}
.socialiconcircle2
{
width:94px;
height:94px;
border-radius:50%;
background:#fff;
position:absolute;
left:3px;
top:3px;
}
.icons
{
font-size:2em;
position:absolute;
left: 33px;
top: 33px;
-webkit-animation:iconjump 2s infinite;
-moz-animation:iconjump 2s infinite;
animation:iconjump 2s infinite;
}
/* fill color */
.dribbblecolor{background:#ea4c89;}
.facebookcolor{background:#3b5998;}
.googlecolor{background:#dd4b39;}
.flickrcolor{background:#ff0084;}
.pinterestcolor{background:#c8232c;}
.youtubecolor{background:#c4302b;}
.githubcolor{background:#171515;}
.linkedincolor{background:#0e76a8;}
.tumblrcolor{background:#34526f;}
/* icons color */
.dribbble{color:#ea4c89!important}
.facebook{color:#3b5998!important}
.google{color:#dd4b39!important}
.flickr{color:#ff0084!important}
.pinterest{color:#c8232c!important;}
.youtube{color:#c4302b!important;}
.github{color:#171515!important;}
.linkedin{color:#0e76a8!important;}
.tumblr{color:#34526f!important;}
/* fill background */
@-webkit-keyframes fill
{
0%{top:100px;}
100%{top:0px;}
}
@-moz-keyframes fill
{
0%{top:100px;}
100%{top:0px;}
}
@keyframes fill
{
0%{top:100px;}
100%{top:0px;}
}
/* jump social icons */
@-webkit-keyframes iconjump
{
0%{top:33px;}
10%{top:70px;}
20%{top:33px;}
50%{top:33px;}
90%{top:33px;}
100%{top:33px;}
}
@-moz-keyframes iconjump
{
0%{top:33px;}
10%{top:70px;}
20%{top:33px;}
50%{top:33px;}
90%{top:33px;}
100%{top:33px;}
}
@keyframes iconjump
{
0%{top:33px;}
10%{top:70px;}
20%{top:33px;}
50%{top:33px;}
90%{top:33px;}
100%{top:33px;}
}

Social Icon Animation - Script Codes JS Codes

/*
Basic Struture
<div class="socialicon">
<div class="dribbblecolor socialiconcircle1"></div>
<div class="socialiconcircle2">
<i class="fa icons fa-dribbble dribbble"></i>
</div>
</div>
*/
Social Icon Animation - Script Codes
Social Icon Animation - Script Codes
Home Page Home
Developer Jitendra
Username berdejitendra
Uploaded July 04, 2022
Rating 4.5
Size 2,507 Kb
Views 46,552
Do you need developer help for Social Icon Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jitendra (berdejitendra) Script Codes
Name
Underpants - One Element
Log in Form
Mobile Sub Menu Concept
Mobile App Setting Menu animation
Two joint circles - One element
Hidden menu on click or touch
One element - Pixel Dog
Services table
One element - Steve Jobs
CSS3 Lion
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!