One Punch Man CSS Animation
HTML
<div class="wrapper">
<h1>one punch man</h1>
</div>
CSS
@font-face {
font-family: "One Punch Man";
src: url('https://dl.dropboxusercontent.com/s/82eb7avq9a10xyl/one-punch-man.ttf?dl=0') format("truetype");
}
html, body {
background-color: tomato;
width: 100%;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
animation-name: colorchange;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wrapper {
text-align: center;
display: table;
height: 100%;
width: 100%;
}
.wrapper h1 {
font-family: "One Punch Man", Basic Latin;
font-size: 120px;
font-weight: 100;
display: table-cell;
vertical-align: middle;
color: #fff;
text-transform: uppercase;
animation-name: scaleIt;
animation-duration: 4s;
animation-timing-function: ease-out;
}
@keyframes scaleIt {
from {
transform: scale(1.1)
}
to {
transform: sclae(1)
}
}
@keyframes colorchange {
0% {background: #AE1125;}
25% {background: #3782DE;}
50% {background: #EC441E;}
75% {background: #2E7FE1;}
100% {background: #F7CB44;}
}
JAVASCRIPT
// NO JS TODAY :-)
