CSS animation tutorial

From EduTech Wiki
Jump to: navigation, search

This article or section is a stub. A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.


Learning goals
  • Be able to create simple CSS transforms
Level and target population
  • Beginners
Teaching materials
  • Example text: ....
  • This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
  • Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

1 Introduction

div {
    -webkit-animation: mykeyframes 5s; /* Chrome, Safari, Opera */
    animation: mykeyframes 5s;

/* Chrome, Safari, Opera */
@-webkit-keyframes mykeyframes {
    from {background: red;}
    to {background: yellow;}

/* Standard syntax */
@keyframes mykeyframes {
    from {background: blue;}
    to {background: red;}

2 Links