Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pulsating avatar
<div class="avatar">
<img src="http://lorempixel.com/400/400/cats/">
</div>

Pulsating avatar

A simple CSS animation for having ripples pulsate out of the avatar.

A Pen by Blixt on CodePen.

License.

body {
-webkit-align-items: center;
align-items: center;
background: #222;
display: -webkit-flex;
display: flex;
height: 100%;
-webkit-justify-content: center;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.avatar {
height: 200px;
position: relative;
width: 200px;
}
.avatar img {
border-radius: 9999px;
height: 100%;
position: relative;
width: 100%;
z-index: 2;
}
@-webkit-keyframes cycle-colors {
0% { border-color: hsl(0, 100%, 50%); }
25% { border-color: hsl(90, 100%, 50%); }
50% { border-color: hsl(180, 100%, 50%); }
75% { border-color: hsl(270, 100%, 50%); }
100% { border-color: hsl(360, 100%, 50%); }
}
@-webkit-keyframes pulse {
to {
opacity: 0;
-webkit-transform: scale(1);
}
}
@keyframes cycle-colors {
0% { border-color: hsl(0, 100%, 50%); }
25% { border-color: hsl(90, 100%, 50%); }
50% { border-color: hsl(180, 100%, 50%); }
75% { border-color: hsl(270, 100%, 50%); }
100% { border-color: hsl(360, 100%, 50%); }
}
@keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}
.avatar::before,
.avatar::after {
-webkit-animation: pulse 2s linear infinite;
animation: pulse 2s linear infinite;
border: #fff solid 8px;
border-radius: 9999px;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
-webkit-transform: scale(0.714);
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.avatar::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.avatar:hover img {
content: url('http://i.imgur.com/n0g2rVB.jpg');
}
.avatar:hover::before,
.avatar:hover::after {
-webkit-animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.avatar:hover::after {
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.