<h1>Breathing</h1>
/*
Weight axis: 100 – 700
Width axis: 85 – 100
*/
@font-face {
font-family: "IBM Plex Sans Roman";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}
* {
box-sizing: border-box;
}
body {
font-family: "IBM Plex Sans Roman", Times;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 100vh;
background-color: #B2DFDB;
}
h1 {
font-weight: 100;
font-size: 10vw;
font-variation-settings: 'wght' 100, 'wdth' 85;
animation: breathe 4000ms infinite forwards;
}
@keyframes breathe {
60% {
font-variation-settings: 'wght' 700, 'wdth' 100;
}
100% {
font-variation-settings: 'wght' 100, 'wdth' 85;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.