Sequencing

In notebook:
FrontEndMasters Motion Design with CSS
Created at:
2016-11-29
Updated:
2016-11-29
Tags:
css animation
- (from the previous note) How about switching backround--image instead of overlaying images on top of each other for the Tuna effect?

One way would have been to use css pseudo elements, but you cannot use Skrollr on them. Otherwise you cannot animate the opacity if you just change the background image position (you cannot fade background-position). 

What if we want to chain two animations one after the other?

Animation stacking:
  .sequenced-thing {
  animation: 
    sequence1 1s 2,
    sequence2 3s 2s infinite;
}
​sequence1​ has a 1second duration and runs 2 times. So ​sequence2​ starts at 2s.