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

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

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

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

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

Output

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bonitasoft

Bonitasoft

55 Followers

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