3 comments

  • Mattan IngramMattan Ingram, over 7 years ago

    Some good basics, but if you really want a challenge try chaining multiple CSS keyframe animations with different delays and transitions.

    Theoretically it shouldn't really be that different (make a delay that matches the duration of the previous animation), but in reality browser differences and bugs make it a nightmare.

    For example check out this codepen in Safari/Chrome/Firefox and see how the white lines animate out differently for each (bugs used to be worse actually, browsers are performing closer but not exact): http://codepen.io/mattaningram/pen/OPbxgO

    1 point
    • Dan CortesDan Cortes, over 7 years ago

      Oh, for sure—you can do some pretty complex stuff with @keyframes. For simpler things like buttons, info bubbles, or menus, transitions can sometimes be enough. @keyframes are a lot more DRY, though, so there's always that.

      Also, that animation is slick. I couldn't really notice the difference between browsers.

      0 points
      • Mattan IngramMattan Ingram, over 7 years ago

        Thanks, yeah I'm seeing far fewer differences than I did a month or two ago. In Chrome/Safari sometimes the white-line animate at the same time instead of staggered, but not consistent...

        Now if there was a way to have transitioned animations between pages or tabs without having to rely on position: absolute to make sure they animate on top of each other I would be a happy pure CSS animator.

        0 points