There are possibilities to add movement to our website without actually writing scripts. We can use gif images, but in this lesson we will use CSS animations and SVG graphics. CSS animations can change the CSS properties of HTML elements resulting in visible changes. SVG graphics can be equipped similarly with an <animation> element too. This is a topic too broad for this course, but you can read and try more of this afterwards.
@keyframes - this rule is used to define an animation. We can define, list more states to an HTML element or class that it should pass through.
animation-name - this property is used to define the animation used on an HTML tag or on a CSS class. The value added to the property should be the name of the animation.
animation-duration – this property is used to define the time the animation should take up in seconds or milliseconds.
animation-iteration-count – this property sets the times the animation should be repeated. Possible values are numbers, if we need a concrete iteration count, or infinite, if the animation should be repeated as long as the page is opened.
animation-direction – this property has the possible values normal (as default), reverse (to play it in the reverse order), alternate (playing normal and reverse after that) etc.
<svg> </svg>- this tag is used to wrap SVG(Scalable Vector Graphics) image descriptions.
<circle /> - describes a circle. With the property cx and cy we can mark the center of the circle, with the property named r the radius of the circle is set. These properties can be set from the CSS files too. You do not need a closing tag
<line /> - describes a line. We need to define the two endpoints adding values to the x1, x2, y1, y2 property. These properties can be set from the CSS files too. You do not need a closing tag
<text> </text> - this element is used to add text to the graphics. With the properties x and y we can define the place the text will appear.
<animate> - this tag can be used to add animation to an SVG element. There are attributes to this tag we need to define to achieve the change we want. We need to refer the property we want to change (attributeName), the SVG element’s id (xlink: href). We have to define the starting value (from) and the stop value (to) to the change, define the duration (dur). Study the example from this lesson to learn how to use it.
stroke – with this property we can add a color to the outline of the SVG elements.
stroke-width – with this property we can set the width of the SVG element’s outlines.
fill – with this property we can add the color to the SVG objects which should be filled.
The SVG is abbreviation for Scalable Vector Graphics, meaning easily resizable drawings.
When using SVG drawing, check which browsers current versions can handle your code.
We can use CSS animation to change SVG elements, but some attributes cannot be changed with it.
There are more types of animation tags, which can be used in SVG: <animateMotion>, <animateTransform>.
Example on CSS animation:
On the example above we have one sentence marked as a paragraph. We apply an animation to this paragraph named change, it lasts 10 seconds.
The animation has five steps changing the color of the text to different green shades, and the size of the text is growing too.
Example on SVG drawing:
In this example we draw two lines and a circle in a 200 by 200 pixel sized drawing space. We defined the position of the elements in the HTML files leaving every other setting to the CSS file. These properties can be defined in the HTML file too.
The drawing space has background-color and border, defined as in the previous lessons for every other HTML tag.
The lines are colored in red, and are 2 pixels wide. These attributes are special applied to the SVG elements. The circle has no filling, has only outline.
The purple numbers note the coordinates of the four corners of the drawing space and are added to the picture for you to see how to choose coordinates for your elements.
Example on SVG animation:
In the example above we added an identifier to the circle, so we can refer it from the animation.
In the first animation we refer the circles radius, the r attribute and we raise its value from 50 to 90 pixels in 5 seconds. After the animation the circle would fall back to 50 pixel radius, without using the freeze value for the fill attribute.
The second animation refers to the thickness of one of the lines. The line has an id the animation can use and the width is changing from 1 pixel to 10 pixels. There is an extra attribute in this animation begin: the second animation begins after the first is finished.
Add an h3 heading with the text: Top 3 browsers 2018
Under the h3, add an SVG graphic to the file. Format it to 500 pixel width, 300 pixel height, add a background color and a subtle border.
Add 3 circles with the following center points and radiuses: (70, 70, 60), (250, 150, 100), (410, 150, 60), (430, 230, 50). Fill the circles with a color you choose, use the fill property. They should have borders (stroke and stroke-width). Add different id-s to each of them, so you can refer them in the CSS file.
Add the texts Chrome, Firefox, and Opera in the circles, by using the <text> element. Add bold property and size (font-size) to the text.
<circle id="c1" cx="100" cy="100" r="50"/>