HOME ANIMATION MENU Contact Shop Video Software on Amazon

   Have you ever wanted to produce a personalized video or DVD for someone special, but the special effects you wanted were not included in your video production software. This was the problem I faced but did not want to spend hundreds of dollars for more video editing software that I would only use a few times.

   How to create an animation with scrolling text and a changeable background or animation that could be used to make the video introduction, transitions and ending credits enjoyable and fun for low or no cost. My solution was to use CSS3 keyframe animations. First, find the software. There are many free HTML and CSS editing software programs available online for Free or low cost. If you are talented enough to attempt building videos or DVDs, then you may think of building or altering an animation for your personalized video.

   How to use CSS animation in a video production? First build the animation, then use a screen capture program to capture the animation from your internet browser or HTML editor to video format. My video editor AVS4YOU and other editors include a screen capture option which can make this task very easy. Saving the screen capture file in the same dimensions as your video will have a better appearance.

   Once the animation is saved to a video format, it can be edited into your video with your editor. Whether you decide to use text from the video editor or from the CSS animation is your choice. However, CSS gives you much more flexibility and options with text than the video editors that I've observed. A commonly desired text scrolling style is the Star Wars scrolling text, which can be done in CSS animation, as seen here at SitePoint.com

   Remember these points to produce the best quality video. Since you are not uploading the web page design to a website, always use the best available quality images (JPG, PNG or GIF). Scalable Vector Graphics (SVG) may be an option for quality images when designing. SVGeneration.com and Colorzilla.com can be useful tools for custom backgrounds. If you are in need of building or altering an image PaintNET is a Free image and photo editing program (Windows Only).

    Also, when screen capturing your video, use the full-screen option (F11) in your browser. This will hide the browser toolbars and borders giving you a larger screen for production. If your CSS animation is too big or too small, use your browsers page Zoom option for a quick fix on text or image size. The zoom option will increase or decrease anything on the page, but leaves the background 'html' image unchanged.

  1. Create a CSS animation with HTML editor using best quality media.
  2. Screen capture your animation using your internet browser and screen capture software in highest quality with same dimensions.
  3. Use your captured video while editing and producing your video with your video editor.

   With the concept stated, let's move on to some examples. Golfball was one of my original web page designs for a personalized Golfing video introduction, of course the words on the golfball were different. Snow and Happy New Year are two seasonal examples of these CSS animations. Happy New Year can be altered to fit a Birthday, Graduation or any other celebratory event. A video made from a CSS animation is Airplane Banner. Please note that best quality was not used in designing the animation or producing this video as download webpage time and size was a factor in its creation.

   The idea here is not to create a video, but to enhance and personalize a video with effects specific to the theme or person(s) of the video. CSS animations may be too technical to produce for the average person, however, for those with the desire, CSS animations can help make a video or DVD a very unique gift or experience.