Atom

Animation Dynamic

Default

Animation Name

  • The name of the animation must be unique.

  • The name should be used to name the keyframe @keyframes play--$ANIMATION-NAME { ... } and the modifier class .animation--$ANIMATION-NAME {...}

Animation Steps

  • Number of frames in the animation sprite

  • Used to set the animations steps in css and to calculate the background-position offset in the animations keyframes:

  • background-position: calc($ANIMATION-WIDTH px * $ANIMATION-STEPS * -1)

  • and: animation: play--$ANIMATION-NAME $ANIMATION-DURATION s steps($ANIMATION-STEPS) infinite;

Animation Frame Width

  • The width of one frame

Animation Duration

  • The duration of one animation loop

  • Used here: animation: play--$ANIMATION-NAME $ANIMATION-DURATION s steps($ANIMATION-STEPS) infinite;

Animation Sprite URL

  • The absolute path to a png or svg sprite that should be animated

  • Used here: <div class='animation animation--$ANIMATION-NAME' style='background: url('$ANIMATION-SPRITE-URL') left center; margin: auto;'>

Show code 
            
              <div class="animation animation--robot" style="background: url("https://www.trinamic.com/fileadmin/assets/Landingpage/svg/3D_printer_3.svg") left center; margin: auto;">
  <style>
                @keyframes play--robot {
                        100% {
                                background-position: calc(350px *  27 * -1);
                        }
                }

                .animation--robot {
                        width: 350px;
                        height: 200px;
                        animation: play--robot 3s steps(27) infinite;
                }
  </style>
</div>

PNG

Show code 
            
              <div class="animation animation--ramping" style="background: url("https://www.trinamic.com/fileadmin/assets/Landingpage/animation_png/ramping_sprite.png") left center; margin: auto;">
  <style>
                @keyframes play--ramping {
                        100% {
                                background-position: calc(350px *  27 * -1);
                        }
                }

                .animation--ramping {
                        width: 350px;
                        height: 200px;
                        animation: play--ramping 3s steps(27) infinite;
                }
  </style>
</div>