Logo Animation

Developer
Mark Michon
Size
2,611 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?

Experiments with css-only svg logo animations. What is a logo animation? How do you make a logo animation? This script and codes were developed by Mark Michon on 20 January 2023, Friday.

Logo Animation Previews
IQ Test

Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109 59.5"> <title>Mark Michon Logomark</title>
<!-- <g class="m2-container"> --> <polygon class="m2" points="79.4 29.9 66 16.2 66 30.3 79.8 44 100 24 100 59.5 109 59.5 109 0 79.4 29.9"/>
<!-- </g> --> <polygon class="m1" points="0 0 0 59.5 11 59.5 11 24 30.5 43.9 50 24 50 59.5 60 59.5 60 0 30 29.8 0 0"/>
</svg>
</div>
</body>
</html>

Logo Animation - Script Codes CSS Codes

body { background: url(http://lorempixel.com/g/1100/600/nature/3/) no-repeat;
}
.wrap { width: 40%; margin: 20px auto;
}
svg { width: 300px;
}
.m2-container { width: 100%; overflow: hidden;
}
.m2 { fill: white; opacity: 0; -webkit-transition: all ease; transition: all ease; -webkit-animation: emerge 2s 4.75s 1 forwards; animation: emerge 2s 4.75s 1 forwards;
}
.m1 { -webkit-transition: all ease; transition: all ease; -webkit-transform: translateX(25px); transform: translateX(25px); stroke-dasharray: 1000; stroke-dashoffset: 1000; -webkit-animation: dash 3s linear forwards, swapOutline 2s 1.2s linear forwards, setup 2.5s 3s ease-out forwards; animation: dash 3s linear forwards, swapOutline 2s 1.2s linear forwards, setup 2.5s 3s ease-out forwards;
}
.m1 { fill: transparent; stroke-width: 1; stroke: white; stroke-linejoin: miter;
}
@-webkit-keyframes dash { to { stroke-dashoffset: 0; }
}
@keyframes dash { to { stroke-dashoffset: 0; }
}
@-webkit-keyframes swapOutline { to { stroke: transparent; fill: white; }
}
@keyframes swapOutline { to { stroke: transparent; fill: white; }
}
@-webkit-keyframes emerge { 0% { opacity: 0; -webkit-transform: translateX(-45%); transform: translateX(-45%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes emerge { 0% { opacity: 0; -webkit-transform: translateX(-45%); transform: translateX(-45%); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@-webkit-keyframes setup { 0% { -webkit-transform: translateX(25px); transform: translateX(25px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes setup { 0% { -webkit-transform: translateX(25px); transform: translateX(25px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); }
}
Logo Animation - Script Codes
Logo Animation - Script Codes
Home Page Home
Developer Mark Michon
Username markmichon
Uploaded January 20, 2023
Rating 3
Size 2,611 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!

Mark Michon (markmichon) Script Codes
Name
Get Image Ratio
Dim Extra Content
A Pen by Mark Michon
Image reveal on hover
Animated Search Icon
Dashboard Graph
Filtered Content Experiment
DataTables Custom Filter Demo
List experiment
Form Validation Starter example
Create amazing Facebook ads 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!