<svg width='100%' height='65px'>
<g>
<rect fill='#3d5599' width='100%' height='25'></rect>
<rect fill='#cb4d3e' width='45%' height='25'></rect>
</g>
</svg>
html, body {
height: 100%;
}
body {
display: flex;
background-color: #fff;
align-items: center;
justify-content: center;
font-family: "Helvetica";
}
@keyframes move {
0%, 100% {
transform: translateX(0);
} 50% {
transform: translateY(35px);
}
}
svg {
g rect:first-of-type {
animation: move 3s ease infinite;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.