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

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

.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

.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

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

Step 5

.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

@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;}}

Output

Now when we click on preview we will see an output like shown in the picture below.

You can change the font color for the title and the text widgets to make it more readable against the background image.

I would love to know what other CSS animation effects you would like to implement with Bonita UI Designer. Please share your tips and examples.

Have fun with Bonita!

Bonitasoft helps innovative companies worldwide deliver better digital user experiences — for customers and employees — on the Bonita application platform.