How to create a typing animation with CSS in Bonita UI Designer

4 min readDec 31, 2020

See how to add a typing animation effect to the text-widget in Bonita UI Designer using CSS (or write your own HTML and use the same CSS codes)

by Bishal Thalpaliya, Bonita R&D Engineer & front end developer

CSS allows us to add animation without using JavaScript to the HTML elements to change incrementally from one style to another as many times as we want. To add an animation to the elements, we need to specify @keyframes. In this post, I will explain how to add a typing animation effect to the text-widget in Bonita UI Designer using CSS. (If you are using something other than the Bonita UIDesigner for your interface design, you may write your own HTML and define the CSS classes for all the elements so that you can use the same CSS codes for this effect.)

Step 1

First, create a new application page in Bonita UI Designer.

Step 2

Drag and drop a container widget in the blank area on the page.
Set the properties:
Width = 12
CSS classes = main-container
Open style.css and write the following code:

.main-container {display: inline-block;background-image: url(‘../img/background.png’);background-size: cover;height: 100vh;}

Note: for background image, you can add an image file as an asset to the page.

Step 3

Drag and drop a title widget inside the “main-container”.
Set the properties:
Width = 12
Text = Digital process automation for a competitive edge
Title level = Level 1
Alignment = left
Open style.css and write the following code:

.main-container h1 {display: inline-block;margin-top: 15%;margin-left: 5%;font-size: 3vw;color: #cdd026;}

Note: you can change the CSS properties as per your background image.

Step 4

Drag and drop a container widget below the title widget inside the “main-container”.
Set the properties:
Width = 12
CSS = typing-text-container
Open style.css and write the following code:

.typing-text-container {width: 650px;margin-left: 5%;}

Step 5

Drag and drop a text widget inside the “typing-text-container”.
Set the properties:
Width = 12
CSS = typing-text
Text = Re-invent your business processes with Bonita platform
Alignment = left
Open style.css and write the following code:

.typing-text p{border-right: 2px solid #337ab7;font-size: 170%;text-align: center;white-space: nowrap;overflow: hidden;animation: typewriter 10s steps(54) forwards,blinkingCursor .8s step-end infinite ;animation-iteration-count: infinite;color: #fff;}

Note: In the CSS, we need to define the properties for animation such as name, duration, delay, direction, iteration-count, etc. Similarly, the value 54 for steps in the animation property defines up to the number of characters (including white spaces) we want to add to an animation.

Step 6

Now we need to specify the keyframes for the animations such as typewriter and blinkingCursor.
Open style.css and write the following code:

@keyframes typewriter {0% {width: 0;}30% {width: 95%;}80% {width: 95%;}90% {width: 0;}100% {width: 0;}}@keyframes blinkingCursor {from, to {border-right-color: transparent;}50% {border-right-color: #337ab7;}to {border-right-color: transparent;}}