CSS animations tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 43: Line 43:
}  
}  
</source>
</source>
== Examples ==
<style>
  div {
    animation-name: sample;
    animation-duration: 10s;
    background-color: blue;
    height: 100px;
    width: 100px;
  }
  @keyframes sample {
    from {
      background-color: blue;
    }
    30% {
      background-color: green;
    }
    65% {
      background-color: yellow;
    }
    to {
      background-color: blue;
    }
  }
</style>
</head><body>
  <p>
    Test passes if there is a filled blue square with 'Filler Text'
    initially on page load, and if the color of the square gradully changes
    in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
  </p>
  <div>Filler Text</div>


== Links ==
== Links ==

Revision as of 19:41, 3 April 2018

Draft

Learning goals
  • Be able to create simple CSS transforms
Prerequisites
Level and target population
  • Beginners
Teaching materials
  • Example text: ....
Remarks
  • 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).

Introduction

The CSS animations specification “describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.” (CSS Animations Level 1, W3C Working Draft, 30 November 2017). 

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;}
}

Examples

<style> 

 div {
   animation-name: sample;
   animation-duration: 10s;

   background-color: blue;
   height: 100px;
   width: 100px;
 }

 @keyframes sample {
   from {
     background-color: blue;
   }
   30% {
     background-color: green;
   }
   65% {
     background-color: yellow;
   }
   to {
     background-color: blue;
   }
 }

</style> </head><body>

Test passes if there is a filled blue square with 'Filler Text' initially on page load, and if the color of the square gradully changes in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.

Filler Text

Links

Official
Other
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=CSS_animations_tutorial&oldid=67359"