Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pounding heart animation
/* Pounding heart animation */
body { text-align: center; background: #000; }
.wr {
margin:auto;
width:400px;
height:300px;
}
@keyframes diams1 {
from { transform:rotate(00deg); color:#c0c0c0; }
50% { transform: scale(1.4); }
to { transform: cubic-bezier(150, 25, 140, 200); }
}
@keyframes choyan {
from { transform:ease-in-out; }
50% { transform: rotate(360deg); color:#FFF; }
to { transform: ease-out; }
}
.diams1 {
font-size: 40px;
color: #FFF;
animation: 5.5s diams1 infinite;
transform-origin: center;
}
.choyan {
display: inline-blocks;
font-size: 50px;
color: #00fffc;
animation: 5.5s choyan infinite;
transform-origin: center;
}
<div class="wr">
<div class="diams1">&bull;</div>
<div class="choyan">Choyon</div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment