The issue lies with Safari's current inability to support animated content in pseudo elements, causing the typewriter-like banner to remain static.
However, it is still possible to achieve the typewriter effect of characters appearing one by one without using JavaScript. This method can be challenging to implement with a non-typewriter font, requiring calculations even with a fixed-width font.
To overcome this challenge with a typewriter font, a solution is proposed here. By leveraging before and after pseudo elements on a div, the banner can be written progressively, while hiding unwanted characters. Two animations are used: one for writing on the after pseudo element and one for writing before on the before pseudo element.
The colors are used to represent different elements - green for before pseudo element, red for after pseudo element, and blue for the div itself.
The keyframes are extensive, dynamically created to handle the animation. It is advised to have a script in place, whether in JS or PHP, to make banner content modifications easier without recalculating keyframes manually.
div.typewriter {
position: relative;
font-size:350%;
font-family:'DIN Bold',serif;
align-items:center;
text-align: center;
padding-bottom:2em;
width: 100%;
}
div.typewriterinner {
text-align: left;
padding: 0;
margin: 0;
overflow: hidden;
color: #ea746a;
}
div.typewriterinner:before, div.typewriterinner:after {
margin: 0;
padding: 0;
position: relative;
top: 0;
left: 0;
display: inline-block;
font-family: Courier, monospace;
animation: write 15s infinite linear;
background-color: white;
}
div.typewriterinner:before {
content: ' ';
animation-name: writebefore;
width: 50%;
height: 1em;
z-index: 2;
}
div.typewriterinner:after {
content: 'AESTHETICS.CONTENT CREATION.DIGITAL MARKETING.WEB DESIGN.';
z-index: 1;
overflow-x: hidden;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
div.typewriterinner:before, div.typewriterinner:after {
font-size: 6vw; /* just to get one one line - this needs more thought - what do we want to happen? */
}
}
@keyframes writebefore {0% { margin-left: -0ch;}0.01% { margin-left: -0.5ch;}0.8771929824561403% { margin-left: -0.5ch;}0.8871929824561403% { margin-left: -1ch;}1.7543859649122806% { margin-left: -1ch;}1.7643859649122806% { margin-left: -1.5ch;}2.631578947368421% { margin-left: -1.5ch;}2.6415789473684206% { margin-left: -2ch;}3.508771929824561% { margin-left: -2ch;}3.518771929824561% { margin-left: -2.5ch;}4.385964912280701% { margin-left: -2.5ch;}4.395964912280701% { margin-left: -3ch;}5.263157894736842% { margin-left: -3ch;}5.273157894736841% { margin-left: -3.5ch;}6.140350877192982% { margin-left: -3.5ch;}6.150350877192982% { margin-left: -...
<div class="typewriter">TRANSFORM YOUR BRAND THROUGH<br>
<div class="typewriterinner"></div>
</div>