CSS
body {
background: #000;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: 10px;
margin: 10px;
list-style: none;
display: inline-block;
border-radius: 4px;
font-size: 100px;
color: #fff;
}
li:before {
font-family: FontAwesome;
content: '\f179';
}
li {
animation-name: cool;
animation-duration: .4s;
animation-timing-function: ease;
animation-iterations: 1;
animation-fill-mode: forwards;
}
@keyframes cool {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
