A practical animation

I've used and combined techniques which control the Dynamic Animation on the bottom of the page and the Interactive Prototyping Tool.

What you see here is the admin view of the prototyping tool. The white squares with dots open a menu for some actions and further styling options.
Elements can be styled globally from the very first white square with dots and also they can be styled separately.

Saving is disabled for the purpose of this demo to not create unnecessary data.

Interactive Prototyping Tool [version: 4.431]

Layout

Styles

Global

center line
padding
border
color
border-radius
box-shadow
color
background color
lightning*

Children

padding
border
color
border radius
box shadow
color
background color
text color

Buttons

padding
margin
border
color
border-radius
box-shadow
color
background
text-color
font-size
padding
border
color
border-radius
box-shadow
color
background
text-color

Pilt taevast

See pilt on tehtud suvel, päike valgustab helendama öised pilved.

padding
margin
border
color
border-radius
box-shadow
color
background
text-color
font-size
padding
border
color
border-radius
box-shadow
color
background
text-color

Pilt udusest loomelinnaku osast

Manuaalne säriaeg, umbes 3 sekundit.

padding
margin
border
color
border-radius
box-shadow
color
background
text-color
font-size

Dynamic animation

This came first.
It is a constantly moving and changing animation. The colors have their different properties like saturation and light altered with the sliders. Also the dynamics of clouds, rain, snow and leaves can be controlled with the sliders.

transitions may require 50% more computing power;

About

This interactive dynamic animation is created using HTML, SVG, CSS and Javascript. It works on every device with a web browser because the elements are fundamentally regular web elements that make up a web page. The possibilities are abundant.
This animation is controllable by sliders and some buttons. The first three buttons choose time of day (daylight, sunset, night); Fourth button adds music for enhancing emotional inclusion; Three purple buttons on the first row are controlling the speed of the transition of colors. Next up are sliders.
The sliders control, from top to bottom: daylight, season, wind speed, cloudiness, precipitation. The sliders are also interconnected. For example: precipitation amount depends on cloudiness. Also the speed of the wind affects direction of precipitation and leaves and the amount of leaves. The amount of leaves is also affected by season slider. The season slider also can change between rain and snow.