Combining CSS animations

 Combining animations into one keyframe makes the animations perform better.


I had an animation using 'scale3d' on a parent element and an animation using 'rotate3d' on a child. The performance was bad but improved when I put the parent's 'scale3d' in the child's keyframe.




Comments

Post a Comment

Popular posts from this blog

Giving PWA icons transparent backgrounds

Image
 I changed some of my icons to have transparent backgrounds. These were the icons mentioned in the 'manifest' files of my Progressive Web Apps (PWA). I had given the icons white backgrounds to make them clearer as recommended by the PWA tutorial on Google's 'web.dev'. But these looked strange next to other icons on a Windows desktop. I made all my web pages PWA's by adding a 'manifest' file and starting a 'do-nothing' service worker. Chrome warns that loading these service workers slows things down. There are more tips at: bbingo.xyz/techtips/
Read more

RCS 'identification marker' comes in useful

Image
 I forgot which version of my JavaScript game I 'minimised' to produce the latest version. Luckily I had put an RCS 'identification marker' in an HTML comment at the start of the code. I had used the '$Revision$' marker. RCS is the free source control system that came with my old Linux system. There are more tips at:  bbingo.xyz/techtips/
Read more

Marking up code examples

Image
 I now put code examples inside a '<pre><code>' block I was using '&nbsp;' to indent lines. I set the '<code>' to 'display:block' so I can indent it with 'margin-left'. I start the example code immediately after the '<code>' tag to avoid an extra newline. I put everything in a 'div' with contenteditable="true" and  spellcheck="false" to allow 'copy and pasting' and to remove any red 'spell-check' wavy line. I give the 'div' 'max-width:100%' and 'overflow:auto' to stop scrollbars appearing in the browser's outer window There are more tips at: [bbingo.xyz/t](http://bbingo.xyz/t) There are more tips at:  bbingo.xyz/techtips/
Read more