Thanks for your answer.
I already had a look at the source code of the "Terrible Takeways"-example. You can find the relevant sections attached.
What makes me wonder is the background image they used:
http://www.leedsbuildingsociety.co.uk/resources/kick-my-habits/img/screen-2-titles-stacked.png[
^]
Why didn't they use a series of multiple pictures and instead cramped everything in one picture?
HTML:
<h1 class="flicker abs-mid ir">Terrible takeaways</h1>
CSS:
.habit.current .flicker {
-webkit-animation: flicker .2s steps(1) infinite;
-moz-animation: flicker .2s steps(1) infinite;
-ms-animation: flicker .2s steps(1) infinite;
-o-animation: flicker .2s steps(1) infinite;
animation: flicker .2s steps(1) infinite;
}
.screen.takeaways h1 {
width: 465px;
height: 333px;
margin: -330px 0 0 -524px;
background-image: url(../img/screen-2-titles-stacked.png);
}
Nevertheless, implementing this code is not working for me, which suggests that I am overlooking something, or there is some Javascript involved.
Any idea what is missing?