CSS animations tutorial: Difference between revisions
Jump to navigation
Jump to search
Line 46: | Line 46: | ||
== Examples == | == Examples == | ||
=== Simple color animation | === Simple color animation === | ||
Source: | Source: The CSS suite from the CSS consortium. The code below and in CodePen has been slightly altered. | ||
http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/html/animation-keyframes-001.htm | http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/html/animation-keyframes-001.htm | ||
Line 54: | Line 54: | ||
Codepen (for play and copy/paste): https://codepen.io/danielkschneider/pen/KoBWpV | Codepen (for play and copy/paste): https://codepen.io/danielkschneider/pen/KoBWpV | ||
<source lang=" | <source lang="CSS"> | ||
div.coloranim { | div.coloranim { | ||
animation-name: sample; | animation-name: sample; | ||
Line 70: | Line 69: | ||
to { background-color: blue; } | to { background-color: blue; } | ||
} | } | ||
</ | </source> | ||
<source lang="HTML5"> | |||
<p> | <p> | ||
There is a filled blue square with 'Filler Text' when the page loads. | There is a filled blue square with 'Filler Text' when the page loads. | ||
Line 77: | Line 77: | ||
Try to add another keyframe for another color. Make the animation slower, then faster. | Try to add another keyframe for another color. Make the animation slower, then faster. | ||
</p> | </p> | ||
<div id="coloranim"> | <div id="coloranim">I argue for a change<br>Now</div> | ||
</source> | </source> | ||
=== Simple moving animation === | |||
== Links == | == Links == |
Revision as of 19:07, 3 April 2018
- 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
Simple color animation
Source: The CSS suite from the CSS consortium. The code below and in CodePen has been slightly altered.
http://test.csswg.org/suites/css-animations-1_dev/nightly-unstable/html/animation-keyframes-001.htm
Codepen (for play and copy/paste): https://codepen.io/danielkschneider/pen/KoBWpV
div.coloranim {
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; }
}
<p>
There is a filled blue square with 'Filler Text' when the page loads.
Color of the square gradully changes in order: BLUE to GREEN to YELLOW and back to BLUE in 10 seconds.
Try to add another keyframe for another color. Make the animation slower, then faster.
</p>
<div id="coloranim">I argue for a change<br>Now</div>
Simple moving animation
Links
- Official
- CSS Animations Level 1 W3C Working Draft, 30 November 2017 (as of April 2018)
- HTML5 test suite
- Other
- Using CSS animations (MDN)