The Ultimate Toolbox for creating
amazing web sites!

Animate text with the Banner object

One of the lesser known features of WYSIWYG Web Builder is the ability to animate individual characters of the Banner text.
By using WYSIWYG Web Builder's built-in CSS3 animations you can create amazing animated banners without using flash or video.
CSS3 animations will only work in modern browsers! Animations and transitions do NOT work in Internet Explorer 9 or older!

Not all animations may be useful for animating characters. For example animating the border-color will not have any effect on the text or will just look weird...

Also some animations were designed for showing, while others were designed for hiding. Usually the name of the animation indicates this. For example 'puff-in' is for showing and 'puff-out' is for hiding. But of course you can designed your own animations with the Animation Manager.

Step 2
Set output format to 'Publish as standard text with CSS3 styling'
Step 3
Select 'Enable CSS3 text animation' in the 'Text Animation' section of the properties.

You can set a different animation for showing and hiding the characters. If you set both animations then the animations will be played continuously. If only the show animation is specified then the animation will play only once on page load.

The Duration specifies the length of the animation and Delay specifies the delay between the animation of each character.
The sequence of the animations can be set with the Mode property:
sequence, use standard character sequence
reverse, reverse the character sequence
shuffle, randomize the character sequence
Step 1
Insert a Banner object
Welcome to my website!
Related tutorials:
An introduction to CSS3 animations
Start and stop CSS3 animations with Events
An introduction to CSS3 transitions