CSS Animation Cinemagraphs

Actually this is a byproduct of some of my recent tests to check if subtle CSS animations may contribute to page aesthetics.
Performance and browser support were also part of this study–see some conclusions below.


Photos by GaborfromHungary, Monica Valladares and  mariaamanda0140


{{Gadget Not Found: HeroImage_MistyLake}}
{{Gadget Not Found: HeroImage_StarTrails}}
{{Gadget Not Found: HeroImage_CityLights}}
{{Gadget Not Found: HeroImage_MoonlitClouds}}


Test results/conclusions:

Although the above effects are all rather slow and completely rely on CSS animation, it seems they can get quite demanding in terms of CPU/GPU resources.  While most* modern desktop browsers do a fair job rendering the effects, the situation on mobile devices is a whole different story. 

The results largely depend on the used device, the platform and the browser and range from ‘decent’ to ‘miserable’.  Since some CSS3 animations use hardware acceleated rendering, it seems that this will not always suceed or may even impact performance. Even some beefy devices struggle here while others render everything smoothly and seem totally unimpressed. Some browsers do a better job than others on a particular device but completely fail on another. In general, and unsurprisigly, we see home game winners like Safari on iOS, Edge on Windows phones and Chrome on Nexus devices. 

* Internet Explorer: IE and Edge yet don’t support mix-blend-mode, which is used in the ‘CityLights’ Gadget. So the fake Bokehs don't look pretty there.
IE 11 furthermore seems to screw up background-size inside vw/vh sized containers sometimes.

Conclusion: Currently I wolud not use such contiuous ambient animation effects on websites mainly targeted at mobile users. 
Jerky movements do more harm than good here.