css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              $c-compacter-door: #ED761D;
$c-compacter-door-indent: darken($c-compacter-door, 5%);
$c-sump: darken($c-compacter-door, 38%);
$c-body-edge: darken($c-compacter-door, 15%);
$c-body-gaps: rgba(0,0,0,.3);
$c-body-highlights: rgba(255,255,255,.2);
$c-hand: darken(#505050, 5%);
$c-bumpers: #1A1A1A;
$c-neck: darken(#F9B42A, 10%);
$c-electronics: #4A4A4A;
$c-electronics-panel-light: #CC0000;
$c-electronics-panel-border: darken($c-electronics, 4%);
$c-solar-meter-background: #151515;
$c-solar-meter-colour: #EDDF60;
$c-hand-store-lip: #8F8F8F;
$c-hand-store-base: #404040;
$c-track-crest: #202020;
$c-track-trough: #3A3A3A;
$c-axels: #101010;
$c-spot: #DD0000;
$c-land: darken(#352840, 5%);

.wall-e {
  animation: tracks 0.25s infinite linear;
  transform: scale(2);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 115px;
  box-shadow:
    0px 20px 30px -20px rgba(0,0,0,0.5),
    inset 0px -20px 20px -20px rgba(0,0,0,0.5)
  ;
  background:
    // Left wrist
    linear-gradient(
      to bottom,
      lighten($c-hand, 10%) 0px, lighten($c-hand, 10%) 2px,
      darken($c-hand, 15%) 2px, darken($c-hand, 15%) 6px,
      lighten($c-hand, 10%) 6px, lighten($c-hand, 10%) 8px
    ),
    // Left hand top finger
    linear-gradient(
      to right,
      $c-hand 0px, lighten($c-hand, 5%) 12px,
      lighten($c-hand, 10%) 12px, lighten($c-hand, 15%) 20px,
    ),
    // Left hand bottom finger
    linear-gradient(
      to right,
      $c-hand 0px, lighten($c-hand, 5%) 12px,
      lighten($c-hand, 10%) 12px, lighten($c-hand, 15%) 20px,
    ),
    // Right wrist
    linear-gradient(
      to bottom,
      lighten($c-hand, 10%) 0px, lighten($c-hand, 10%) 2px,
      darken($c-hand, 15%) 2px, darken($c-hand, 15%) 6px,
      lighten($c-hand, 10%) 6px, lighten($c-hand, 10%) 8px
    ),
    // Right hand top finger
    linear-gradient(
      to left,
      $c-hand 0px, lighten($c-hand, 5%) 12px,
      lighten($c-hand, 10%) 12px, lighten($c-hand, 15%) 20px,
    ),
    // Right hand bottom finger
    linear-gradient(
      to left,
      $c-hand 0px, lighten($c-hand, 5%) 12px,
      lighten($c-hand, 10%) 12px, lighten($c-hand, 15%) 20px,
    ),
    // Electronics panel top
    linear-gradient(
      to right,
      $c-hand-store-lip 0px, $c-hand-store-lip 16px,
      $c-neck 16px, $c-neck 50px,
      $c-hand-store-lip 50px, $c-hand-store-lip 66px
    ),
    // Electronics panel left vent border edges
    repeating-linear-gradient(
      to right,
      transparent 0px, transparent 1px,
      $c-electronics-panel-border 1px, $c-electronics-panel-border 2px,
      transparent 2px, transparent 14px,
    ),
    // Electronics panel left vent border top and bottom
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 1px,
      $c-electronics-panel-border 1px, $c-electronics-panel-border 2px,
      transparent 2px, transparent 10px,
    ),
    // Electronics panel left vent column left
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 1px,
      darken($c-electronics-panel-border, 5%) 1px, darken($c-electronics-panel-border, 5%) 2px
    ),
    // Electronics panel left vent column centre
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 1px,
      darken($c-electronics-panel-border, 5%) 1px, darken($c-electronics-panel-border, 5%) 2px
    ),
    // Electronics panel left vent column right
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 1px,
      darken($c-electronics-panel-border, 5%) 1px, darken($c-electronics-panel-border, 5%) 2px
    ),
    // Electronics panel left light
    radial-gradient(
      circle at center, $c-electronics-panel-light 1.25px, transparent 1.25px
    ),
    // Electronics panel left light casing
    linear-gradient(
      to bottom,
      darken($c-electronics-panel-border, 5%) 0px, darken($c-electronics-panel-border, 5%)3px
    ),
    // Electronics panel left light casing edges
    repeating-linear-gradient(
      to right,
      $c-electronics-panel-border 0px, $c-electronics-panel-border 1px,
      transparent 1px, transparent 4px,
    ),
    // Electronics panel left light casing border top and bottom
    repeating-linear-gradient(
      to bottom,
      $c-electronics-panel-border 0px, $c-electronics-panel-border 1px,
      transparent 1px, transparent 4px,
    ),
    // Electronics panel right title
    linear-gradient(
      to right,
      $c-solar-meter-colour 0px, $c-solar-meter-colour 13px
    ),
    // Electronics panel right sun
    radial-gradient(
      circle at center, $c-solar-meter-colour 2px, transparent 2px
    ),
    // Electronics panel right solar meter
    linear-gradient(
      to bottom,
      darken($c-solar-meter-colour, 45%) 0px, darken($c-solar-meter-colour, 45%) 1px,
      transparent 1px, transparent 2px,
      darken($c-solar-meter-colour, 45%) 2px, darken($c-solar-meter-colour, 45%) 3px,
      transparent 3px, transparent 4px,
      $c-solar-meter-colour 4px, $c-solar-meter-colour 5px,
      transparent 5px, transparent 6px,
      $c-solar-meter-colour 6px, $c-solar-meter-colour 7px,
      transparent 7px, transparent 8px,
      $c-solar-meter-colour 8px, $c-solar-meter-colour 11px,
    ),
    // Electronics panel right background
    linear-gradient(
      to bottom,
      lighten($c-solar-meter-background, 15%) 0px, lighten($c-solar-meter-background, 15%) 2px,
      $c-solar-meter-background 2px, $c-solar-meter-background 17px,
      lighten($c-solar-meter-background, 15%) 17px, lighten($c-solar-meter-background, 15%) 19px,
    ),
    // Electronics panel
    linear-gradient(
      to bottom,
      $c-electronics 0px, $c-electronics 19px
    ), 
    // Hand storage
    linear-gradient(
      to bottom,
      $c-hand-store-base 0px, $c-hand-store-base 4px,
      darken($c-hand-store-base, 10%) 4px, darken($c-hand-store-base, 10%) 6px,
      $c-hand-store-base 6px, $c-hand-store-base 13px,
      darken($c-hand-store-base, 10%) 13px, darken($c-hand-store-base, 10%) 15px,
      $c-hand-store-base 15px, $c-hand-store-base 19px
    ), 
    // Compacter door dirt
    linear-gradient(
      to bottom,
      transparent 0px, rgba(0,0,0,0.5) 37px
    ),
    // WALL-E W uprights
    repeating-linear-gradient(
      to right,
      #000 0px, #000 1px,
      transparent 1px, transparent 2px
    ),
    // WALL-E W bottom
    linear-gradient(
      to right,
      #000 0px, #000 5px,
    ),
    // WALL-E A uprights
    repeating-linear-gradient(
      to right,
      #000 0px, #000 1px,
      transparent 1px, transparent 3px,
      #000 3px, #000 4px,
    ),
    // WALL-E A across
    repeating-linear-gradient(
      to bottom,
      #000 0px, #000 1px,
      transparent 1px, transparent 2px,
      #000 2px, #000 3px,
    ),
    // WALL-E LL uprights
    repeating-linear-gradient(
      to right,
      #000 0px, #000 1px,
      transparent 1px, transparent 6px,
    ),
    // WALL-E LL across
    repeating-linear-gradient(
      to right,
      #000 0px, #000 4px,
      transparent 4px, transparent 6px,
    ),
    // WALL-E dot
    radial-gradient(
      circle at center, #000 1px, transparent 1.1px
    ),
    // WALL-E E upright
    linear-gradient(
      to bottom,
      #FFF 0px, #FFF 5px
    ),
    // WALL-E E across
    repeating-linear-gradient(
      to bottom,
      #FFF 0px, #FFF 1px,
      transparent 1px, transparent 2px
    ),
    // Spot
    radial-gradient(
      circle at center,
      $c-spot 4px, transparent 4px
    ),
    // Compacter door indent edges
    repeating-linear-gradient(
      to right,
      $c-body-gaps 0px, $c-body-gaps 1px,
      transparent 1px, transparent 3px,
      $c-body-highlights 3px, $c-body-highlights 4px,
      transparent 4px, transparent 18px
    ),
    // Compacter door indent tops
    repeating-linear-gradient(
      to right,
      transparent 0px, transparent 1px,
      $c-body-gaps 1px, $c-body-gaps 3px,
      transparent 3px, transparent 18px
    ),
    // Compacter door indent bottoms
    repeating-linear-gradient(
      to right,
      transparent 0px, transparent 1px,
      $c-body-highlights 1px, $c-body-highlights 3px,
      transparent 3px, transparent 18px,
    ),
    // Compacter door indent inners
    repeating-linear-gradient(
      to right,
      transparent 0px, transparent 1px,
      transparent 1px, $c-compacter-door-indent 3px,
      transparent 3px, transparent 18px
    ),
    // Compacter door
    linear-gradient(
      to bottom,
      darken($c-compacter-door, 25%) 0px, $c-compacter-door 11px,
      $c-compacter-door 11px, darken($c-compacter-door, 20%) 58px,
    ),
    // Compacter door bottom
    linear-gradient(
      to bottom,
      // $c-body-gaps 0px, $c-body-gaps 1px,
      transparent 0px, transparent 1px
    ),
    // Bumpers
    linear-gradient(
      to right,
      $c-bumpers 0px, $c-bumpers 18px,
      transparent 18px, transparent 47px,
      $c-bumpers 47px, $c-bumpers 66px
    ),
    // Main body background
    linear-gradient(
      to bottom,
      transparent 0px,
      $c-electronics 0px, $c-electronics 20px,
      darken($c-body-edge, 40%) 20px, $c-body-edge 31px,
      $c-body-edge 31px, darken($c-body-edge, 20%) 57px,
      $c-sump 57px, darken($c-sump, 5%) 62px,
      transparent 62px
    ),
    // Neck
    linear-gradient(
      to bottom,
      $c-neck 0px, darken($c-neck, 15%) 12px, darken($c-neck, 30%) 16px
    ),
    // Bridge
    linear-gradient(
      to bottom,
      #333333 1px, #888888 3px,
      #AAAAAA 3px, #333333 8px
    ),
    // Top of neck
    linear-gradient(
      to bottom,
      lighten($c-neck, 40%) 0px, darken($c-neck, 20%) 14px
    ),
    // Left track shadow
    linear-gradient(
      to left,
      rgba(0,0,0,0.5) 0px, transparent 10px,
    ),
    // Left track highlight
    linear-gradient(
      176deg,
      rgba(255,255,255,.2) 0px, transparent 25px,
      transparent 25px, rgba(0,0,0,.5) 32px
    ),
    // Left track animation cover
    linear-gradient(
      to bottom,
      $c-land 0px, $c-land 8px
    ),
    // Left track
    repeating-linear-gradient(
      -4deg,
      $c-track-crest 0px, $c-track-crest 4px,
      $c-track-trough 4px, $c-track-trough 8px
    ),
    // Right track shadow
    linear-gradient(
      to right,
      rgba(0,0,0,0.5) 0px, transparent 10px,
    ),
    // Right track highlight
    linear-gradient(
      -176deg,
      rgba(255,255,255,.2) 0px, transparent 25px,
      transparent 25px, rgba(0,0,0,.5) 32px
    ),
    // Right track animation cover
    linear-gradient(
      to bottom,
      $c-land 0px, $c-land 8px
    ),
    // Right track
    repeating-linear-gradient(
      4deg,
      $c-track-crest 0px, $c-track-crest 4px,
      $c-track-trough 4px, $c-track-trough 8px
    ),
    // Axels
    linear-gradient(
      to right,
      $c-axels 0px, $c-axels 10px,
      transparent 10px, transparent 56px,
      $c-axels 56px, $c-axels 66px
    ),
    // Axel Curvature Left
    radial-gradient(
      $c-axels 10px, transparent 10px
    ),
    // Axel Curvature Right
    radial-gradient(
      $c-axels 10px, transparent 10px
    )
  ;
  background-size:
    // Left wrist
    8px 8px,
    // Left hand top finger
    20px 9px,
    // Left hand bottom finger
    20px 9px,
    // Right wrist
    8px 8px,
    // Right hand top finger
    20px 9px,
    // Right hand bottom finger
    20px 9px,
    // Electronics panel top
    66px 1px,    
    // Electronics panel left vent border edges
    16px 11px,
    // Electronics panel left vent border top and bottom
    13px 12px,
    // Electronics panel left vent column left
    3px 9px,
    // Electronics panel left vent column centre
    3px 9px,
    // Electronics panel left vent column right
    3px 9px,
    // Electronics panel left light
    3px 2px,
    // Electronics panel left light casing
    3px 2px,
    // Electronics panel left light edges
    7px 5px,
    // Electronics panel left light edges top and bottom
    5px 5px,
    // Electronics panel right title
    13px 1px,
    // Electronics panel right sun
    4px 4px,
    // Electronics panel right solar meter
    7px 11px,
    // Electronics panel right background
    15px 19px,
    // Electronics panel
    34px 19px,
    // Hand storage
    66px 19px,
    // Compacter door dirt
    56px 37px,
    // WALL-E W uprights
    5px 5px,
    // WALL-E W bottom
    5px 1px,
    // WALL-E A uprights
    4px 4px,
    // WALL-E A across
    2px 3px,
    // WALL-E LL uprights
    10px 5px,
    // WALL-E LL across
    10px 1px,
    // WALL-E dot
    3px 3px,
    // WALL-E E upright
    1px 5px,
    // WALL-E E across
    4px 5px,
    // Spot
    8px 9px,
    // Compacter door indent edges
    40px 18px,
    // Compacter door indent tops
    40px 1px,
    // Compacter door indent bottoms
    40px 1px,
    // Compacter door indent inners
    40px 16px,
    // Compacter door
    56px 37px,
    // Compacter door bottom
    58px 1px,
    // Bumpers
    66px 18px,
    // Main body background
    66px 62px,
    // Neck
    8px 16px,
    // Bridge
    20px 8px,
    // Top of neck
    2px 14px,
    // Left track shadow
    17px 48px,
    // Left track highlight
    17px 48px,
    // Left track animation cover
    17px 8px,
    // Left track
    17px 56px,
    // Right track highlight
    17px 48px,
    // Right track shadow
    17px 48px,
    // Right track animation cover
    17px 8px,
    // Right track
    17px 56px,
    // Axels
    66px 10px,
    // Axel curvature left
    20px 20px,
    // Axel curvature right
    20px 20px
  ;
  background-repeat: no-repeat;
  
  &:before, &:after {
    content: '';
    position: absolute;
    top: -105px;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 27px;
    height: 20px;
    box-sizing: border-box;
    border: solid 1px #333;
    border-radius: 4px 52px 39px 90px;
    transform-origin: 6px 4px;
    box-shadow: inset 0 0 2px #000;
    background:
      // Eye reflection bottom red
      radial-gradient(
        lighten(rgba(160,70,70,.2), 30%) 0px, transparent 1px
      ),
      // Eye reflection top blue
      radial-gradient(
        lighten(rgba(23,87,167,1), 30%) 0px, transparent 2px
      ),
      // Eye pupil
      radial-gradient(
        #151515 3px, transparent 3px
      ),
      // Eye reflection top white
      radial-gradient(
        rgba(255,255,255,.6) 0px, transparent 1px
      ),
      // Eye inner ring
      radial-gradient(
        #333 3px, transparent 4px
      ),
      // Eye
      radial-gradient(
        darken(#1757A7, 15%) 4px, #1757A7 6px, transparent 6px
      ),
      // Eye Outer
      radial-gradient(
        #666666 7px, transparent 7px
      ),
      #AAAAAA
    ;
    background-size:
      2px 2px,
      4px 4px,
      6px 6px,
      2px 2px,
      8px 8px,
      12px 12px,
      14px 14px,
      27px 20px
    ;
    background-position:
      12px 8px,
      8px 5px,
      8px 5px,
      6px 4px,
      7px 4px,
      5px 2px,
      4px 1px,
      0px 0px
    ;
    background-repeat: no-repeat;
  }
  
  &:before {
    left: 28px;
    transform: rotateZ(20deg);
    animation: 12s twitch-right infinite ease-in-out;
  }
  
  &:after {
    left: 0px;
    transform: rotateZ(-20deg) rotateY(180deg);
    animation: 12s twitch-left infinite ease-in-out;
  }
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  background: 
    linear-gradient(
      -160deg,
      #120041 0%, #b27176 70%
    )
  ;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: -970px;
    left: calc(50% - 2000px);
    margin: auto;
    width: 4000px;
    height: 1000px;
    border-radius: 50% 50% 0 0;
    box-shadow: inset 250px 0 20px rgba(255,255,255,.15);
    background: $c-land;
    ;
  }
}

@keyframes tracks {
  0% {
    background-position:
      // Left wrist
      10px 43px,
      // Left hand top finger
      10px 37px,
      // Left hand bottom finger
      10px 48px,
      // Right wrist
      82px 43px,
      // Right hand top finger
      70px 37px,
      // Right hand bottom finger
      70px 48px,
      // Electronics panel top
      17px 30px,
      // Electronics panel left vent border edges
      33px 32px,
      // Electronics panel left vent border top and bottom
      35px 31px,
      // Electronics panel left vent column left
      36px 33px,
      // Electronics panel left vent column centre
      40px 33px,
      // Electronics panel left vent column right
      44px 33px,
      // Electronics panel left light
      37px 46px,
      // Electronics panel left light casing
      37px 46px,
      // Electronics panel left light edges
      36px 44px,
      // Electronics panel left light edges top and bottom
      36px 44px,
      // Electronics panel right title
      52px 34px,
      // Electronics panel right sun
      52px 36px,
      // Electronics panel right solar meter
      58px 36px,
      // Electronics panel right background
      51px 31px,
      // Electronics panel
      33px 31px,
      // Hand storage
      17px 31px,
      // Compacter door dirt
      22px 50px,
      // WALL-E W uprights
      38px 78px,
      // WALL-E W bottom
      38px 82px,
      // WALL-E A uprights
      45px 79px,
      // WALL-E A across
      46px 78px,
      // WALL-E LL uprights
      51px 78px,
      // WALL-E LL across
      51px 82px,
      // WALL-E dot
      62px 79px,
      // WALL-E E upright
      68px 78px,
      // WALL-E E across
      68px 78px,
      // Spot
      66px 76px,
      // Compacter door indent edges
      30px 52px,
      // Compacter door indent tops
      30px 52px,
      // Compacter door indent bottoms
      30px 69px,
      // Compacter door indent inners
      30px 53px,
      // Compacter door
      22px 50px,
      // Compacter door bottom
      21px 87px,
      // Bumpers
      17px 74px,
      // Main body background
      17px 30px,
      // Neck
      46px 14px,
      // Bridge
      40px 0px,
      // Top of neck
      49px 0px,
      // Left track shadow
      0px 72px,
      // Left track highlight
      0px 72px,
      // Left track animation cover
      0px 64px,
      // Left track
      0px 64px,
      // Right track highlight
      83px 72px,
      // Right track shadow
      83px 72px,
      // Right track animation cover
      83px 64px,
      // Right track
      83px 64px,
      // Axels
      17px 92px,
      // Axel curvature left
      17px 82px,
      // Axel curvature right
      62px 82px
    ;
  }
  100% {
    background-position:
      // Left wrist
      10px 43px,
      // Left hand top finger
      10px 37px,
      // Left hand bottom finger
      10px 48px,
      // Right wrist
      82px 43px,
      // Right hand top finger
      70px 37px,
      // Right hand bottom finger
      70px 48px,
      // Electronics panel top
      17px 30px,
      // Electronics panel left vent border edges
      33px 32px,
      // Electronics panel left vent border top and bottom
      35px 31px,
      // Electronics panel left vent column left
      36px 33px,
      // Electronics panel left vent column centre
      40px 33px,
      // Electronics panel left vent column right
      44px 33px,
      // Electronics panel left light
      37px 46px,
      // Electronics panel left light casing
      37px 46px,
       // Electronics panel left light edges
      36px 44px,
      // Electronics panel left light edges top and bottom
      36px 44px,
      // Electronics panel right title
      52px 34px,
      // Electronics panel right sun
      52px 36px,
      // Electronics panel right solar meter
      58px 36px,
      // Electronics panel right background
      51px 31px,
      // Electronics panel
      33px 31px,
      // Hand storage
      17px 31px,
      // Compacter door dirt
      22px 50px,
      // WALL-E W uprights
      38px 78px,
      // WALL-E W bottom
      38px 82px,
      // WALL-E A uprights
      45px 79px,
      // WALL-E A across
      46px 78px,
      // WALL-E LL uprights
      51px 78px,
      // WALL-E LL across
      51px 82px,
      // WALL-E dot
      62px 79px,
      // WALL-E E upright
      68px 78px,
      // WALL-E E across
      68px 78px,
      // Spot
      66px 76px,
      // Compacter door indent edges
      30px 52px,
      // Compacter door indent tops
      30px 52px,
      // Compacter door indent bottoms
      30px 69px,
      // Compacter door indent inners
      30px 53px,
      // Compacter door
      22px 50px,
      // Compacter door bottom
      21px 87px,
      // Bumpers
      17px 74px,
      // Main body background
      17px 30px,
      // Neck
      46px 14px,
      // Bridge
      40px 0px,
      // Top of neck
      49px 0px,
      // Left track shadow
      0px 72px,
       // Left track highlight
      0px 72px,
      // Left track animation cover
      0px 64px,
      // Left track
      0px 72px,
      // Right track highlight
      83px 72px,
      // Right track shadow
      83px 72px,
      // Right track animation cover
      83px 64px,
      // Right track
      83px 72px,
      // Axels
      17px 92px,
      // Axel curvature left
      17px 82px,
      // Axel curvature right
      62px 82px
    ;
  }
}

@keyframes twitch-right {
  10% {
    transform: rotateZ(20deg);
  }
  12% {
    transform: rotateZ(5deg);
  }
  14% {
    transform: rotateZ(5deg);
  }
  16% {
    transform: rotateZ(20deg);
  }
  20% {
    transform: rotateZ(20deg);
  }
  22% {
    transform: rotateZ(30deg);
  }
  25% {
    transform: rotateZ(5deg);
  }
  27% {
    transform: rotateZ(20deg);
  }
}

@keyframes twitch-left {
  10% {
    transform: rotateZ(-20deg) rotateY(180deg);
  }
  12% {
    transform: rotateZ(-20deg) rotateY(180deg);
  }
  14% {
    transform: rotateZ(-5deg) rotateY(180deg);
  }
  16% {
    transform: rotateZ(-5deg) rotateY(180deg);
  }
  18% {
    transform: rotateZ(-20deg) rotateY(180deg);
  }
  20% {
    transform: rotateZ(-20deg) rotateY(180deg);
  }
  22% {
    transform: rotateZ(-30deg) rotateY(180deg);
  }
  25% {
    transform: rotateZ(-5deg) rotateY(180deg);
  }
  27% {
    transform: rotateZ(-20deg) rotateY(180deg);
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console