Animation of Objects on the Website by Application of CSS3 Language

Authors: Vladimir Simovic, Matija Varga, Robert Svetlacic

Abstract:

Scientific work analytically explores and demonstrates techniques that can animate objects and geometric characters using CSS3 language by applying proper formatting and positioning of elements. This paper presents examples of optimum application of the CSS3 descriptive language when generating general web animations (e.g., billiards and movement of geometric characters, etc.). The paper presents analytically, the optimal development and animation design with the frames within which the animated objects are. The originally developed content is based on the upgrading of existing CSS3 descriptive language animations with more complex syntax and project-oriented work. The purpose of the developed animations is to provide an overview of the interactive features of CSS3 descriptive language design for computer games and the animation of important analytical data based on the web view. It has been analytically demonstrated that CSS3 as a descriptive language allows inserting of various multimedia elements into websites for public and internal sites.

Keywords: Animation recording, web page graphics, HTML5 forms, Cascading Style Sheets 3 - CSS3, man-computer interaction, KML animation presenting format, GML, Google Earth Professional.

Digital Object Identifier (DOI): doi.org/10.5281/zenodo.1314544

References:

[1] CSS3 Animations. URL: http://www.zemris.fer.hr/predmeti/irg/Zavrsni/13_Komar/sadrzaj_css.html. (accessed 7/6/2017).
[2] CSS Positioning. URL: https://www.mojwebdizajn.net/skriptni-jezici/vodic/css/css-positioning.aspx. (accessed 9/6/2017).
[3] Fezile Özdamli, The experiences of teachers candidates in developing instructional multimedia materials in project based learning, Procedia – Social and Behavioral Sciences, Volume 15, 2011, Pages 3810-3820.
[4] Geoinformation systems. Internet GIS. URL: https://www.fer.unizg.hr/_download/repository/GIS_06.pdf. (accessed 9/6/2017).
[5] W3SCHOOLS. https://www.w3schools.com/cssref/pr_class_display.asp (accessed 8/6/2017).