mirror of
https://github.com/cssanimation/css-animation-101.git
synced 2025-03-15 11:39:57 +01:00
Updating chapter 3
This commit is contained in:
parent
67aba14930
commit
0e7eeaa371
@ -89,7 +89,6 @@ For that reason we would usually define the timing function for animations as li
|
||||
|
||||
In this case the first half of the animation will be linear, and the second half would use the `ease-out` timing function.
|
||||
|
||||
<div class="callout">
|
||||
<h2>Homework</h2>
|
||||
<p>I've created a simple keyframe animation <a href="http://codepen.io/donovanh/pen/MYMJRd?editors=010">here on CodePen</a>. The properties are listed in the CSS. Try changing some of these properties, and see what happens.</p>
|
||||
</div>
|
||||
## Homework
|
||||
|
||||
I've created a simple keyframe animation [here on CodePen](http://codepen.io/donovanh/pen/MYMJRd?editors=010). The properties are listed in the CSS. Try changing some of these properties, and see what happens.
|
||||
|
@ -1,6 +1,6 @@
|
||||
# Keyframes in action
|
||||
|
||||
So far we've been introduced to the `animation` properties, and had a chance to see how it relies on `keyframes`. Today we'll cover keyframes in greater detail.
|
||||
So far we've been introduced to the `animation` properties, and had a chance to see how it relies on `keyframes`. Next we'll cover keyframes in greater detail.
|
||||
|
||||
## Things to look out for
|
||||
|
||||
@ -88,8 +88,9 @@ We can see that the browser creates the in-between steps between each keyframe.
|
||||
|
||||
[Here's a CodePen](http://codepen.io/donovanh/pen/KwEQdQ) showing the Save button wiggle in action.
|
||||
|
||||
<div class="callout">
|
||||
<h2>Homework</h2>
|
||||
<p>I've created <a href="http://codepen.io/donovanh/pen/azgjMz?editors=010">a new CodePen with a single animated element</a>. It makes use of an "animation-timing-function" within the keyframes and has a series of keyframes creating a relatively complex animation.</p>
|
||||
<p>What happens when you take some frames away? Or change the percentage values? Can you make the cube do something else? See if you can create a feeling of "life" in something simple like a cube!</p>
|
||||
</div>
|
||||
## Homework
|
||||
|
||||
I've created [a new CodePen with a single animated element](http://codepen.io/donovanh/pen/azgjMz?editors=010). It makes use of an "animation-timing-function" within the keyframes and has a series of keyframes creating a relatively complex animation.
|
||||
|
||||
What happens when you take some frames away? Or change the percentage values? Can you make the cube do something else? See if you can create a feeling of "life" in something so simple!
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
# Multiple animations
|
||||
|
||||
Today we'll be looking at how we can make use of multiple sets of keyframes running at the same time.
|
||||
In this chapter we'll be looking at how we can make use of multiple sets of keyframes running at the same time.
|
||||
|
||||
## Traffic lights
|
||||
|
||||
@ -85,8 +85,8 @@ We can [put it all together](http://codepen.io/donovanh/pen/ogRRdR?editors=010)
|
||||
|
||||
For more reading on the subject of `keyframe` syntax, do check out [CSS tricks article on the subject](https://css-tricks.com/snippets/css/keyframe-animation-syntax/).
|
||||
|
||||
<div class="callout">
|
||||
<h2>Homework</h2>
|
||||
<p>Today's homework is a challenge. The traffic light example might look strange to you as it follows the UK pattern.</p>
|
||||
<p>Can you start with <a href="http://codepen.io/donovanh/pen/ogRRdR?editors=010">the traffic light example</a> and change it so that it works more like traffic lights in the USA or elsewhere?</p>
|
||||
</div>
|
||||
## Homework
|
||||
|
||||
Today's homework is a challenge. The traffic light example might look strange to you as it follows the UK pattern.
|
||||
|
||||
Can you start with [the traffic light example](http://codepen.io/donovanh/pen/ogRRdR?editors=010) and change it so that it works more like traffic lights in the USA or elsewhere?
|
||||
|
@ -1,18 +1,16 @@
|
||||
# Animation recap
|
||||
|
||||
In the last 3 weeks, we've covered a lot! I hope it's making sense.
|
||||
We've covered a lot of detail so far! I hope it's making sense.
|
||||
|
||||
It took me a while for this animation and keyframe stuff to click. If it's not clear yet, don't be put off. Keep at it, and bit by bit the various tricks of using animation in HTML and CSS will become clear.
|
||||
When learning this, I must admit it took me a while for this animation and keyframe stuff to make sense to me. If it's not clear yet, don't be frustrated. Keep at it, and bit by bit the various tricks of using animation in HTML and CSS will become clear.
|
||||
|
||||
Today we're going to take a moment to recap what we learned this week. But first, yesterday's homework challenge!
|
||||
In this chapter we're going to take a moment to recap what we learned this week. But first, we'll take a look at that homework challenge!
|
||||
|
||||
## Homework challenge: Traffic lights
|
||||
|
||||
Yesterday's challenge should have been easy. Well, it's easy if you know how. I've created an updated version of [the UK-based traffic light demo](http://codepen.io/donovanh/pen/ogRRdR?editors=010), this time changing the sequence to remove the "red + amber" stage.
|
||||
The homework challenge should have been easy. Well, it's easy if you know how. I've created an updated version of [the UK-based traffic light demo](http://codepen.io/donovanh/pen/ogRRdR?editors=010), this time changing the sequence to remove the "red + amber" stage.
|
||||
|
||||
[See it in action here](http://codepen.io/donovanh/pen/vEqbdw?editors=010). I've made the colour scheme match what Google suggested American traffic lights look like. Apologies if it's way off. ;)
|
||||
|
||||
Many thanks to everyone who had a go!
|
||||
[See it in action here](http://codepen.io/donovanh/pen/vEqbdw?editors=010). I've made the colour scheme match what Google suggested American traffic lights look like.
|
||||
|
||||
## Recap: Animations
|
||||
|
||||
@ -59,8 +57,8 @@ When we want to use an animation, we always have the two pieces:
|
||||
...
|
||||
}
|
||||
|
||||
<div class="callout">
|
||||
<h2>Homework</h2>
|
||||
<p>At this point we should be clear on the different between the animation property and the transition property.</p>
|
||||
<p>Try digging through some of the <a href="http://codepen.io/collection/AxKOdY/">Principles of Animation for the Web</a> examples. Each is made entirely with HTML and CSS, using keyframe animation. Try forking one and see what you can do with it.</p>
|
||||
</div>
|
||||
## Homework
|
||||
|
||||
At this point we should be clear on the different between the animation property and the transition property.
|
||||
|
||||
Have a look at some of the [Principles of Animation for the Web](http://codepen.io/collection/AxKOdY/) examples. Each is made entirely with HTML and CSS, using keyframe animation. Try forking one and see what you can do with it.
|
||||
|
Loading…
x
Reference in New Issue
Block a user