CSS animations tutorial: Difference between revisions
Jump to navigation
Jump to search
m (→Links) |
m (→Links) |
||
Line 45: | Line 45: | ||
; Official | ; Official | ||
* [http://www.w3.org/TR/css3-animations/ CSS Animations]. As of Jan 2015 = W3C Working Draft 19 February 2013 | |||
; Other | |||
* [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations Using CSS animations] (MDN) | |||
* http://lea.verou.me/tag/css3-animations/ | * http://lea.verou.me/tag/css3-animations/ |
Revision as of 23:59, 27 January 2015
<pageby nominor="false" comments="false"/>
- 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
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;}
}
Links
- Official
- CSS Animations. As of Jan 2015 = W3C Working Draft 19 February 2013
- Other
- Using CSS animations (MDN)