On Thu, 1 Dec 2011 08:31:42 -0800, "Tab Atkins Jr." <jackalmage@gmail.com> wrote: > On Thu, Dec 1, 2011 at 5:04 AM, Øyvind Stenhaug <oyvinds@opera.com> wrote: > > I can think of two main approaches. Using > > > > @keyframes name { foo } > > #test { animation: name 1s, name 2s } > > > > as an example: > > > > a) Behave similarly to > > > > @keyframes name1 { foo } > > @keyframes name2 { foo } > > #test { animation: name1 1s, name2 2s } > > > > b) Behave similarly to > > > > @keyframes name { foo } > > #test { animation: name-that-matches-no-at-rule 1s, name 2s } > > > > Where option a) seems kind of nice (can effectively have multiple animations > > re-using the same @keyframes rule). > > (a) is effectively equivalent to (b), since a later animation > manipulating the same property as an earlier animation wins. The only > difference is when you're measuring the start or end of transitions > via the JS events. No, a previous animation may be visible during the animation-delay period: <style> @keyframes move { from { left: 0px; } to { left: 100px; } } div { animation-name: move, move; animation-duration: 2s, 2s; animation-delay: 0s, 3s; } div { width: 100px; height: 100px; background-color: blue; position: relative; } </style> <div></div> The example would give me two movements with model (a) and one movement with model (b). I prefer the former. DavidReceived on Friday, 2 December 2011 09:26:00 UTC
This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:08 UTC