0

codepen.io

  1. Why setting width: 100% on span doesn't work?
  2. There is someway to archive the same result without @keyframes dummy and setTimeout?

EDIT

  1. Enlightened thanks to @Michael_B, seams to be a bug with button tag and flex, switching to div or a works. If you have more info about it, please share!
Alex Gyoshev
  • 11,929
  • 4
  • 44
  • 74
Leo Cavalcante
  • 2,327
  • 2
  • 22
  • 30
  • 1
    1. Narrow the question at one issue .. 2. Include the code on the question – DaniP Dec 21 '16 at 20:35
  • The `width: 100%` doesn't work on the `span` because the parent container (the `button`) has `flex-direction: column`. Why I don't know yet. It seems to work fine with `flex-direction: row`. It may be a bug. Be aware that `button` elements are generally not reliable as flex containers: http://stackoverflow.com/q/35464067/3597276 – Michael Benjamin Dec 21 '16 at 20:38
  • Thank you @Michael_B. Switching to `div` or `a` makes `span` `width:100%` work. Just wondering why too, always thought that tags are just semantically distinct (despite styling), but it seams that they have behavioral differences. – Leo Cavalcante Dec 21 '16 at 21:53

1 Answers1

0

Just found this article on restarting CSS animations: https://css-tricks.com/restart-css-animation/

This clarifies the dirt of setting a dummy animation before the true animation.

Leo Cavalcante
  • 2,327
  • 2
  • 22
  • 30