SVG

Introduction

The following CSS3 animations apply to an SVG text element, a set of SVG paths and an HTML header. See the animation with source code on this page. Tap the graphics to stop the animation.

Three different types of text move and change colors with CSS3 animation properties. The first text, Rotate is declared with the SVG text element. The second text, Wave is declared as a set of paths. The third text, HTML is declared with HTML.

CSS3

During CSS3 animation modify the fill and rotate values for SVG text, paths and HTML elements.

Animation CSS3 Rule-Sets

.animTime{
width: 256px;
height: 256px;
margin-left:auto;
margin-right:auto;
display:block;
clear:both;
fill: red;
background-color:transparent;
animation: anim 5s infinite;
}

@keyframes anim {
0%   {
top: 0px;    
fill: red;     
color:red;     
transform: rotate(60deg);  
}

25%  {
top: 0px;    
fill: blue;    
color:blue;    
transform: rotate(120deg); 
}

50%  {
top: 100px;  
fill: yellow;  
color:yellow;  
transform: rotate(180deg); 
}

75%  {
top: 100px;  
fill: green;   
color:green;   
transform: rotate(240deg); 
}


100% {
top: 0px;    
fill: violet;  
color:violet;  
transform: rotate(360deg);  
}
}

.box300{
width:256px;
margin-left:auto; 
margin-right:auto;
}

JavaScript

The following JavaScript implements an onclick event which toggles animation on and off.

var waveSvg = waveText = htmlex = null;
var bPlaying = true;

/**
Obtain access to the two SVG elements
and one HTML element.
*/
function getElements(){
waveSvg  = document.getElementById('waveSvg');
waveText = document.getElementById('waveText');
htmlEx   = document.getElementById('htmlEx');
}

/**
Responds to click events within
the graphic area.
Stop or start all three animated elements.

Assign the play state to 
"paused" or "running".
*/
function animStopStart(){
if(waveSvg == null){
getElements();
}

if (bPlaying == false){
htmlEx.style.animationPlayState   = "running";
waveText.style.animationPlayState = "running";
waveSvg.style.animationPlayState  = "running";
bPlaying = true;
}

else{
htmlEx.style.animationPlayState   = "paused";
waveText.style.animationPlayState = "paused";
waveSvg.style.animationPlayState  = "paused";
bPlaying = false;
window.location.assign("#top");
}
}

Summary

CSS3 animations apply to an SVG text element, a set of SVG paths and an HTML header. See the animation with source code, on this page. Tap the graphics to stop the animation.

Three different types of text move and change colors with CSS3 animation properties. The first text, Rotate is declared with the SVG text element. The second text, Wave is declared as a set of paths. The third text, HTML is declared with HTML.

You may download or view anim.css, anim.js and wave.svg.