Lessons menu
CSS - intermediate - Lesson nr. 11
Animations and HTML graphics

What this lesson is about?
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.

New CSS rule:
@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.

New CSS properties in this lesson:
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.


New HTML tag:

<svg> </svg>- this tag is used to wrap SVG(Scalable Vector Graphics) image descriptions.


New SVG elements:

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


New SVG properties:

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.


Guidance:

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.

Exercises
1. In the index.html file we placed previously an image gallery. Add animation to these images, changing the opacity from 1 to 0.2 in 10 seconds, infinitely and alternated.
View the result
2. In the toplangs.html file, at the end of the content section, after the table, insert an svg drawing following the steps described:
 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.
View the result
3. Animate the drawing created previously: every circle should change its background color in 5 seconds, you should give two colors (to the attributes from and to). The animations should come one after the other.
View the result
Questionnaire
1. If we want to draw a line in SVG we need to define:
2. What is the name of the CSS rule we use to animate HTML elements?
3. Which attribute is used to add color to a text from an SVG drawing?
4. Which statement is true about the animation above?
<circle id="c1" cx="100" cy="100" r="50"/>
<animate
          xlink:href="#c1"
          attributeName="fill"
          from="blue"
          to="green"
          dur="5s" >
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept