Logo Animation

Developer
Chris Johnston
Size
2,682 Kb
Views
6,072
  1. Logo Animation Previews
  2. Logo Animation HTML Codes
  3. Logo Animation CSS Codes

How do I make an logo animation?

What is a logo animation? How do you make a logo animation? This script and codes were developed by Chris Johnston on 03 January 2023, Tuesday.

Logo Animation Previews
IQ Test

Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="clip"><img src="http://cjohndesign.com/Downloads/CJD-logomark.png"></div> <img src="http://cjohndesign.com/Downloads/CJD-logo.png"></div>
</body>
</html>

Logo Animation - Script Codes CSS Codes

/* Main Styles */
body { background-color: #e6e6e6; background-image: url(http://www.transparenttextures.com/patterns/absurdity.png);
}
.container { width: 400px; margin: 0 auto; text-align: center;
}
img { width: 300px; height: 71px;
}
.clip { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 311px 80px, 311px 221px, 274px 260px, 152px 143px, 190px 101px, 268px 176px, 268px 125px, 126px 260px, 89px 222px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); animation-duration: 6s; animation-iteration-count: infinite; background-color: rgba(255, 255, 255, 0); width: 400px; height: 300px; margin: 0 auto; text-align: center; -webkit-animation-timing-function: ease; animation-name: CJD;
}
.clip img { height: 300px;
}
@keyframes CJD { 20% { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 311px 80px, 311px 221px, 274px 260px, 152px 143px, 190px 101px, 268px 176px, 268px 125px, 126px 260px, 89px 222px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); } 25% { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 311px 80px, 311px 221px, 274px 260px, 268px 260px, 268px 176px, 268px 176px, 268px 124px, 126px 260px, 89px 222px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); } 30% { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 312px 81px, 313px 81px, 268px 124px, 268px 124px, 268px 124px, 268px 124px, 268px 124px, 125px 260px, 89px 221px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); } 35% { -webkit-clip-path: polygon(132px 125px, 132px 174px, 132px 174px, 132px 254px, 132px 254px, 132px 254px, 132px 254px, 132px 254px, 126px 261px, 126px 261px, 126px 261px, 88px 220px, 88px 80px, 126px 40px, 186px 96px, 146px 138px); } 40% { -webkit-clip-path: polygon(133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 87px 79px, 88px 80px, 126px 40px, 186px 96px, 146px 138px); } 45% { -webkit-clip-path: polygon(146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 186px 96px, 186px 96px, 146px 138px); } 60% { -webkit-clip-path: polygon(146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 146px 138px, 186px 96px, 186px 96px, 146px 138px); } 65% { -webkit-clip-path: polygon(133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 133px 126px, 87px 79px, 88px 80px, 126px 40px, 186px 96px, 146px 138px); } 70% { -webkit-clip-path: polygon(132px 125px, 132px 174px, 132px 174px, 132px 254px, 132px 254px, 132px 254px, 132px 254px, 132px 254px, 126px 261px, 126px 261px, 126px 261px, 88px 220px, 88px 80px, 126px 40px, 186px 96px, 146px 138px); } 75% { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 312px 81px, 313px 81px, 268px 124px, 268px 124px, 268px 124px, 268px 124px, 268px 124px, 125px 260px, 89px 221px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); } 80% { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 311px 80px, 311px 221px, 274px 260px, 268px 260px, 268px 176px, 268px 176px, 268px 124px, 126px 260px, 89px 222px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); } 85% { -webkit-clip-path: polygon(132px 125px, 132px 176px, 274px 41px, 311px 80px, 311px 221px, 274px 260px, 152px 143px, 190px 101px, 268px 176px, 268px 125px, 126px 260px, 89px 222px, 89px 79px, 126px 40px, 185px 96px, 145px 138px); }
}
Logo Animation - Script Codes
Logo Animation - Script Codes
Home Page Home
Developer Chris Johnston
Username cjohndesign
Uploaded January 03, 2023
Rating 3
Size 2,682 Kb
Views 6,072
Do you need developer help for Logo 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!

Chris Johnston (cjohndesign) Script Codes
Name
Democracy Day Button
Fireworks with Snapsvg
Be1More Button
Love Potion Studios Logo
Contact Form
Logo error testing
A Pen by Chris Johnston
SVG Firework Elements
SVG map selector
Multiple Cut Corners UI Element - ANIMATED
Create amazing sales emails 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!