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.
Notes: 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