In this post we are going to talk about one of the latest trends in web design: animated logos.
Essentially, this technique consists of animating the website’s logo’s hover states, adding a special something to your website. Although this technique could be as ’just a fancy aesthetic’, it’s widely appreciated that attention to details such as these improve a user’s experience and navigation. Thanks to advances in jQuery, CSS3 and HTML5 Canvas, you can add these cool effects with less lines of code than ever before (hence, the recent proliferation of this technique across the web).
We’re a web design agency. We love design, and we love to keep up-to-date with the hottest trends and digital techniques. So, we wanted to share a couple of animated logos from our recent work…
Invictus Health – CSS3 Beating Heart Loop
Invictus Health are a medical company which uses a heart in their corporate logo. For this project, therefore, we decided to use CSS3 to animate the heart and make it beat! See it in action at Invictus Health
The HTML
1 |
<div class="heartbeat"></div> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.heartbeat {
height:50px;
width:190px;
background-image: url("/wp-content/uploads/2012/06/sprite.png");
background-repeat: no-repeat;}
.heartbeat:hover {
-webkit-animation: beat 1.0s ease-out infinite normal;}
@-webkit-keyframes beat {
0% {
-webkit-transform: scale(1.0);
}
65% {
-webkit-transform: scale(1.1);
}
75% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1.0);
}
}
|
Hex Digital – CSS3 Hexagon Animation
We created this animation to give some fluid movement to our own logo. The animation uses a sprite image and each hexagon is animated independently. You can see it in action here at www.hexdigital.com by hovering your mouse over the logo in our header bar!
The HTML
1 |
<a id="logo" title="" href="/" rel="home"></a> |
The CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
#logo {
display: block;
height: 50px;
width: 50px;
}
a#logo { position: relative; height: 50px !important; width: 50px !important; left: -5px; top: -7px; -webkit-backface-visibility: hidden; z-index: 9999;}
a#logo .block { background: url('/wp-content/uploads/2012/07/logo-sprite.png') no-repeat; display: block; height: 20px; width: 20px; position: absolute; }
a#logo .block.first {
background-position:1px 0px;
left: 20px;
top: 10px;
-webkit-animation:;
-moz-animation:;
animation: ;
}
a#logo .block.second {
background-position:-20px 0px;
top: 28px;
left: 10px;
-webkit-animation: ;
-moz-animation: );
animation: );
}
a#logo .block.third {
background-position: -40px 0px;
top: 27px; left: 29px;
-webkit-animation: ;
-moz-animation: ;
animation: ;
}
a#logo:hover .block.first {
-webkit-animation: block1 1.0s ease-out normal;;
-moz-animation: block1 1.0s ease-out normal;;
animation: block1 1.0s ease-out normal; ;
}
a#logo:hover .block.second {
-webkit-animation: block2 1.0s ease-out normal;
-moz-animation:block2 1.0s ease-out normal ;
animation: block2 1.0s ease-out normal;
}
a#logo:hover .block.third {
-webkit-animation: block3 1.0s ease-out normal ;
-moz-animation: block3 1.0s ease-out normal ;
animation: block3 1.0s ease-out normal ;
}
@-webkit-keyframes block1 {
0% {
-webkit-transform: rotate(0deg) translate(0px,0px);
}
23% {
-webkit-transform: rotate(0deg) translate(10px,18px);
}
33% {
-webkit-transform: rotate(0deg) translate(10px,18px);
}
66% {
-webkit-transform: rotate(0deg) translate(-10px,18px);
}
76% {
-webkit-transform: rotate(0deg) translate(-10px,18px);
}
100% {
-webkit-transform: rotate(0deg) translate(0px,0px);
}
}
@-webkit-keyframes block2 {
0% {
-webkit-transform: rotate(0deg) translate(0px,0px);
}
23% {
-webkit-transform: rotate(0deg) translate(10px,-18px);
}
33% {
-webkit-transform: rotate(0deg) translate(10px,-18px);
}
66% {
-webkit-transform: rotate(0deg) translate(20px,0px);
}
76% {
-webkit-transform: rotate(0deg) translate(20px, 0px);
}
100% {
-webkit-transform: rotate(0deg) translate(0px,0px);
}
}
@-webkit-keyframes block3 {
0% {
-webkit-transform: rotate(0deg) translate(0px,0px);
}
23% {
-webkit-transform: rotate(0deg) translate(-20px,0px);
}
33% {
-webkit-transform: rotate(0deg) translate(-20px, 0px);
}
66% {
-webkit-transform: rotate(0deg) translate(-10px,-18px);
}
76% {
-webkit-transform: rotate(0deg) translate(-10px,-18px);
}
100% {
-webkit-transform: rotate(0deg) translate(0px,0px);
}
}
|
The Image Sprite (To download: right-click and save)
We hope you enjoyed this tutorial. Give it a go, and feel free to post your work in the comments section below!
Some useful links…
Useful resources that can help you create stunning animated logos!
Hex tips #1 – Simple CSS3 transitions
This great CSS3 property can add an extra little something to your elements.
Cubiq Canvas 3D Animated Logo
How to create a rotating 3D cube using HTML5 Canvas. Amazing work by Cubiq.org who share the code with everybody. Check out 3D city out as well – it’s pure CSS3.
Pushing Pixels – Dynamic PNG shadow position & opacity with jQuery:
This is a cool experiment by Pushing Pixels. Turn on the light and drag the bulb to see the magic!
Animate.css
These are a bunch of cool, fun, cross-browser animations for you to use in your projects.
