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.

            
              <div class="header-container">
  <h1>Pure CSS3 animated <span>Bakery</span> House</h1>
  <div class="links-block">
    <a href="http://100dayscode.co.uk/" title="Check my Codepen Challenge" target="_blank">Check my Codepen Challenge</a>
    <a href="https://github.com/eisenfox/bakery-house-css3" target="_blank" title="Check on Github">Check on Github</a> 

  </div>
</div>

<div class="illustration">
  
  <!--ground-->
  <div class="ground"></div>
  
  <!--lantern-->
  <div class="lantern">
    
    <!--lantern top part-->
    <div class="lantern__top"></div>
    
    <!--lantern middle part-->
    <div class="lantern__middle"></div>
    
    <!--lantern bottom part-->
    <div class="lantern__bottom"></div>
  </div>
  
  <!--bakery-->
  <div class="bakery">
    
    <!--base -->
    <div class="bakery__base"></div>
    
    <!--walls -->
    <div class="bakery__walls-basic">
      
      <!-- front part walls-->
      <div class="bakery__front-part">
        
        <!--left window -->
        <div class="bakery__window bakery__window--left">
          
          <!--shelf 1-->
          <div class="shelf shelf--with-border">
            <div class="dessert-pack dessert-pack--top dessert-pack--bigger-dimension">
              <!--dessert 4 -->
              <div class="dessert dessert--4"></div>
              <!--dessert 5 -->
              <div class="dessert dessert--5"></div>
            </div>
          </div>
          
          <!--shelf 2-->
          <div class="shelf shelf--with-border">
            <div class="dessert-pack dessert-pack--top">
              <!--dessert 1 -->
              <div class="dessert dessert--1"></div>
              <!--dessert 2 -->
              <div class="dessert dessert--2"></div>
              <!--dessert 3 -->
              <div class="dessert dessert--3"></div>
            </div>
          </div>
          
          <!--shelf 3-->
          <div class="shelf">
            <div class="dessert-pack dessert-pack--bottom">
              <div class="donut"></div>
              <div class="donut"></div>
              <div class="donut"></div>
              <div class="donut"></div>
              <div class="donut"></div>
            </div>
          </div>
        </div>
        
        <!-- door -->
        <div class="bakery__door"></div>
        
        <!--right window -->
        <div class="bakery__window bakery__window--right">
          
          <!-- cake -->
          <div class="cake">
            
            <!--cake top part-->
            <div class="cake__part cake__part--top"></div>
            
            <!--cake bottom part-->
            <div class="cake__part cake__part--bottom"></div>
            
          </div>
          
        </div>
        
      </div>
      
    </div>
    
    <!--roof-->
    <div class="bakery__roof-basic">
      
      <!--chimney-->
      <div class="bakery__chimney">
        <!--smoke-->
        <div class="smoke"></div>
      </div>
      
      <!-- roof: front part-->
      <div class="bakery__roof-front-part">
        <!-- top block -->
        <div class="bakery__roof-top-block">
          <!--small decorations block -->
          <div class="bakery__roof-top-decorations"></div>
          
          <!--main sign block-->
          <div class="bakery__roof-main-sign">
            <p>Bakery</p>
          </div>
          
        </div>
        
        <!-- bottom block -->
        <div class="bakery__roof-bottom-block"></div>
        
      </div>
      
    </div>
    
  </div>
  
  
</div>
            
          
!
            
              //MIXINS

//transitions mixin
@mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
  transition-property: $property;
  transition-duration: $duration;
  transition-timing-function: $timing;
  transition-delay: $delay;
}

//position absolute mixin
@mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
  position: absolute;
  top: $top;
  left: $left;
  right: $right;
  bottom: $bottom;
}

//BASIC STYLES
//header container styles
.header-container {
  width: 800px;
  margin: 60px auto 80px auto;
  text-align: center;
  
  //header styles
  h1 {
    font: {
      family: 'Lato', sans-serif;
      size: 25px;
    }
    letter-spacing: 1px;
    
    span {
      font: {
        family: 'Rammetto One', cursive;
      }
      color: #d50505;
    }
  }
}

//button styles
.links-block {
  margin-top: 30px;
  
  a {
    @include transition-mix;
    
    display: inline-block;
    padding: 10px 20px;
    margin-right: 20px;
    
    font: {
      family: 'Lato', sans-serif;
      size: 18px;
    }
    
    color: #fff;
    background-color: #d50505;
    text-decoration: none;
    border-radius: 5px;
    
    &:last-child {
      margin-right: 0;
    }
    
    &:hover {
      background-color: darken(#d50505, 10%);
    }
  }
}

//ILLUSTRATION STYLES

//basic illustration styles
.illustration {
  width: 530px;
  height: 450px;
  margin: auto;
  position: relative;
}


//ground styles

$ground-height: 9px;
$ground-animation-bottom: -10px;
$ground-bg: #3c1d0a;

@keyframes ground-animation-reveal {
  
  0% {
    bottom: $ground-animation-bottom;
    opacity: 0;
  }
  
  100% {
    bottom: 0;
    opacity: 1;
  }
  
}

.ground {
  @include position-absolute($bottom: $ground-animation-bottom, $left: 0);
  
  height: $ground-height;
  width: 100%;
  
  opacity: 0;
  
  background-color: $ground-bg;
  
  animation: ground-animation-reveal .3s linear .5s 1 forwards;
}

//lantern styles
$lantern-horz-offset: 10px;
$lantern-height: 207px;
$lantern-width: 35px;
$lantern-animation-bottom: 20px;

$lantern-bottom-width: 16px;
$lantern-bottom-height: 60px;
$lantern-bottom-bg: #d40607;
$lantern-bottom-shadow-bg: #ae0807;

$lantern-top-dimensions: $lantern-width;
$lantern-top-bg: #f47a79;
$lantern-top-shadow-bg: #fff;

$lantern-middle-width: 5px;
$lantern-middle-top-offset: $lantern-top-dimensions;
$lantern-middle-bg: #ae0807;

@keyframes lantern-animation-reveal {
  
  0% {
    bottom: $ground-height + $lantern-animation-bottom;
    opacity: 0;
  }
  
  100% {
    bottom: $ground-height;
    opacity: 1;
  }
  
}

.lantern {
  @include position-absolute($bottom: $ground-height + $lantern-animation-bottom, $left: $lantern-horz-offset);
  
  width: $lantern-width;
  height: $lantern-height;
  
  opacity: 0;
  
  animation: lantern-animation-reveal .3s cubic-bezier(0.39, 1.4, 0.15, 1.3) .9s 1 forwards;
  
  //lantern bottom part styles
  &__bottom {
    @include position-absolute($bottom: 0, $left: 50%);
    
    width: $lantern-bottom-width;
    height: $lantern-bottom-height;
    
    background-color: $lantern-bottom-bg;
    
    transform: translateX(-50%);
    
    //shadow styles
    &:after {
      @include position-absolute($top: 0, $right: 0);
      
      content: '';
      display: block;
      width: 45%;
      height: 100%;
      
      background-color: $lantern-bottom-shadow-bg;
    }
  }
  
  //lantern top part styles
  &__top {
    @include position-absolute($top: 0, $left: 0);
    
    width: $lantern-top-dimensions;
    height: $lantern-top-dimensions;
    
    background-color: $lantern-top-bg;
    border-radius: 50%;
    
    //shadow styles
    &:after {
      @include position-absolute($top: 4px, $left: 4px);
      
      content: '';
      display: block;
      width: 50%;
      height: 50%;
      
      background-color: $lantern-top-shadow-bg;
      border-radius: 50%;
    }
  }
  
  //lantern middle part styles
  &__middle {
    @include position-absolute($top: $lantern-middle-top-offset, $left: 50%);
    
    width: $lantern-middle-width;
    height: calc(100% - #{$lantern-bottom-height} - #{$lantern-middle-top-offset});
    
    background-color: $lantern-middle-bg;
  
    transform: translateX(-50%);
  
    //middle part top block
    &:before {
      @include position-absolute($top: -2px, $left: 50%);
      
      content: '';
      display: block;
      
      width: 205%;
      height: 5px;
      
      background-color: inherit;
      border-radius: 20px;
      
      transform: translateX(-50%);
    }
  }
}

//BAKERY STYLES

//common styles
$bakery-horz-offset: 7px;

.bakery {
  @include position-absolute($bottom: $ground-height, $right: $bakery-horz-offset);
  
  width: 465px;
  height: 444px;
}

//base styles
$base-bg: #621b1b;
  
$base-height: 12px;
$base-animation-top: 40px;

@keyframes base-animation {
  0% {
    opacity: 0;
    bottom: $base-animation-top;
    transform: rotate(5deg);
  }
  
  30% {
    opacity: 1;
    bottom: $base-animation-top/3;
    transform: rotate(10deg);
  }
  
  100% {
    opacity: 1;
    bottom: 0;
    transform: rotate(0deg);
  }
}

.bakery__base {
  @include position-absolute($bottom: $base-animation-top, $left: 0);
  
  width: 100%;
  height: $base-height;
  
  opacity: 0;
  
  transform: rotate(5deg);
  transform-origin: right center;
  
  background-color: $base-bg;
  
  animation: base-animation .3s ease-out 1.05s 1 forwards;
}

//basic walls styles
$bakery-walls-width: 445px;
$bakery-walls-height: 228px;
$brick-element-height: 46px;
$brick-element-offset-horz: 3px;

$bakery-basic-walls-bg: #f57977;
$brick-basic-wall-bg: #681d1d;

@keyframes basic-walls-animation {
  0% {
    transform: translateX(-50%) scale(1.3);
    opacity: 0;
  }
  
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

@keyframes basic-bricks-animation {
  0% {
    transform: scale(0,1);
    opacity: 0;
  }
  
  1% {
    transform: scale(0,1);
    opacity: 1;
  }
  
  100% {
    transform: scale(1,1);
    opacity: 1;
  }
}

.bakery__walls-basic {
  @include position-absolute($bottom: $base-height, $left: 50%);
  
  width: $bakery-walls-width;
  height: $bakery-walls-height;
  
  opacity: 0;
  
  z-index: 2;
  
  background-color: $bakery-basic-walls-bg;
  
  transform: translateX(-50%) scale(1.3);
  
  animation: basic-walls-animation .35s linear 1.45s 1 forwards;
  
  //bricks element
  &:after {
    @include position-absolute($bottom: 0, $left: - $brick-element-offset-horz);
    content: '';
    display: block;
    
    width: calc(100% + 2*#{$brick-element-offset-horz});
    height: $brick-element-height;
    
    opacity: 0;
    
    transform: scale(0,1);
    
    background-image: linear-gradient(to right, $brick-basic-wall-bg 0, $brick-basic-wall-bg 25px, transparent 25px),
      linear-gradient(to right, $brick-basic-wall-bg 0, $brick-basic-wall-bg 25px, transparent 25px),
      linear-gradient(to right, $brick-basic-wall-bg 0, $brick-basic-wall-bg 25px, transparent 25px),
      linear-gradient(to right, $brick-basic-wall-bg 0, $brick-basic-wall-bg 25px, transparent 25px);
    
    background-size: 27px 11px;
    background-position: 0 0, -5px 13px, -10px 26px, -15px 39px;
    
    background-repeat:repeat-x;
    
    animation: basic-bricks-animation .35s linear 2.4s 1 forwards;
  }
}

//basic roof styles
$bakery-basic-roof-width: 460px;
$bakery-basic-roof-height: 180px;
$bakery-basic-roof-offset-horz: 32px;
$bakery-basic-roof-angle: 250px;

$bakery-basic-roof-bg: #b10909;

@keyframes basic-roof-animation {
  0% {
    opacity: 0;
    transform: scale(1,0);
  }
  
  30% {
    opacity: 1;
    transform: scale(1,.3);
  }
  
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}

.bakery__roof-basic {
  @include position-absolute($bottom: $base-height + $bakery-walls-height, $left: - $bakery-basic-roof-offset-horz);
  
  height: $bakery-basic-roof-height;
  width: $bakery-basic-roof-width;
  
  //basic roof bright part
  &:after {
    @include position-absolute($bottom: 0, $left: 0);
    
    content: '';
    display: block;
    
    opacity: 0;
    
    transform: scale(1,0);
    transform-origin: left bottom;
    
    width: calc(100% - #{$bakery-basic-roof-angle});
    
    border-bottom: $bakery-basic-roof-height solid $bakery-basic-roof-bg;
    border-left: $bakery-basic-roof-angle solid transparent;
    
    animation: basic-roof-animation .35s linear 1.85s 1 forwards;
  }
}

//chimney styles
$bakery-chimney-width: 92px;
$bakery-chimney-height: 184px;

$bakery-chimney-top-height: 28px;
$bakery-chimney-top-offset-horz: -13px;
$bakery-chimney-top-offset-vert: -68px;

$bakery-chimney-bottom-width: 25px;

$bakery-chimney-bg: #671919;

@keyframes bottom-chimney-animation {
  
  0% {
    bottom: $bakery-chimney-bottom-width;
    opacity: 0;
  }
  
  20% {
    bottom: $bakery-chimney-bottom-width*1.2;
    opacity: 1;
  }
  
  100% {
    bottom: $bakery-chimney-bottom-width*3;
    opacity: 1;
  }
  
}

@keyframes top-chimney-animation {
  
  0% {
    top: $bakery-chimney-top-offset-vert*1.3;
    transform: rotate(0deg);
    opacity: 0;
  }
  
  20% {
     top: $bakery-chimney-top-offset-vert*1.2;
    opacity: 1;
  }
  
  100% {
    top: $bakery-chimney-top-offset-vert;
    opacity: 1;
  }
  
}

.bakery__chimney {
  @include position-absolute($bottom: 0);
  
  width: $bakery-chimney-width;
  height: $bakery-chimney-height;
  
  //chimney bottom part
  &:before {
    @include position-absolute($bottom: - $bakery-chimney-bottom-width*3, $left: - $bakery-chimney-bottom-width*1.85);
    
    content: '';
    display: block;
    
    width: $bakery-chimney-height - $bakery-chimney-top-height;
    height: $bakery-chimney-width;
    
    opacity: 0;
    
    border-right: $bakery-chimney-bottom-width solid $bakery-chimney-bg;
    border-bottom: $bakery-chimney-bottom-width solid $bakery-chimney-bg;
    
    transform: rotate(90deg) skew(-20deg);
    
    box-sizing: border-box;
    
    animation: bottom-chimney-animation .35s linear 2.1s 1 forwards;
  }
  
  //chimney top part
  &:after {
    @include position-absolute($top: $bakery-chimney-top-offset-vert*1.5, $left: $bakery-chimney-top-offset-horz);
    
    content: '';
    display: block;
    
    width: $bakery-chimney-bottom-width*1.7;
    height: $bakery-chimney-bottom-width*1.2;
    
    opacity: 0;
    
    transform: rotate(0deg);
    
    border-right: $bakery-chimney-bottom-width*1.7 solid transparent;
    border-bottom: $bakery-chimney-bottom-width solid $bakery-chimney-bg;
    
    box-sizing: border-box;
    
    animation: top-chimney-animation .35s linear 2.1s 1 forwards;
  }
}

//front part styles
$front-part-width: $bakery-walls-width * 0.85;
$front-part-shadow-width: $bakery-walls-width - $front-part-width;
$front-part-shadow-height: $bakery-walls-height - 
$brick-element-height;

$front-part-bg: #ffb97e;
$front-part-shadow: #c96361;
$bricks-front-bg: #db0706;
$bricks-front-space: #591719;

@keyframes front-walls-animation {
  0% {
    transform: scale(.3);
    opacity: 0;
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes front-shadow-animation {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@keyframes front-bricks-animation {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  
  20% {
    opacity: 1;
    transform: translateX(50px);
  }
  
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.bakery__front-part {
  @include position-absolute($bottom: 0, $right: 0);
  
  width: $front-part-width;
  height: 100%;
  
  opacity: 0;
  
  transform: scale(.3);
  
  background-color: $front-part-bg;
  
  z-index: 3;
  
  animation: front-walls-animation .35s cubic-bezier(0, 1.73, 0.99, 1.01) 2.7s 1 forwards;
  
  //bricks element
  &:after {
    @include position-absolute($bottom: 0, $left: - $brick-element-offset-horz);
    content: '';
    display: block;
    
    width: calc(100% + 2*#{$brick-element-offset-horz});
    height: $brick-element-height;
    
    opacity: 0;
    
    background-image: linear-gradient(to right, $bricks-front-bg 0, $bricks-front-bg 25px, $bricks-front-space 25px),
      linear-gradient(to right, $bricks-front-bg 0, $bricks-front-bg 25px, $bricks-front-space 25px),
      linear-gradient(to right, $bricks-front-bg 0, $bricks-front-bg 25px, $bricks-front-space 25px),
      linear-gradient(to right, $bricks-front-bg 0, $bricks-front-bg 25px, $bricks-front-space 25px);
    
    border-top: 2px solid $bricks-front-space;
    background-color: $bricks-front-space;
    
    background-size: 27px 11px;
    background-position: 0 0, -5px 13px, -10px 26px, -15px 39px;
    
    background-repeat:repeat-x;
    
    transform: translateX(50px);
    
    animation: front-bricks-animation .3s linear 3.2s 1 forwards;
  }
  
  //shadow element
  &:before {
    @include position-absolute($bottom: $brick-element-height, $left: - $front-part-shadow-width);
    
    content: '';
    display: block;
    
    width: $front-part-shadow-width;
    height: $front-part-shadow-height;
    
    opacity: 0;
    
    border-top: $front-part-shadow-height solid $front-part-shadow;
    border-left: $front-part-shadow-width solid transparent;
    
    box-sizing: border-box;
    
    animation: front-shadow-animation .2s linear 3s 1 forwards;
  }
}

//bakery door styles
$bakery-door-width: 97px;
$bakery-door-height: 190px;
$bakery-door-border-width: 14px;
$bakery-door-border-bottom-width: 22px;

$bakery-door-decorations-width: 65%;
$bakery-door-decorations-border: 4px;

$bakery-door-sign-width: 80%;
$bakery-door-sign-height: 17px;
$bakery-door-sign-offset: 30px;
$bakery-door-sign-font: 14px;

$bakery-door-border: #c2682a;
$bakery-door-bg: #401d0a;
$bakery-door-shadow: #67291c;

$bakery-door-sign-bg: #cacccc;
$bakery-door-sign-color: #45210d;

@keyframes door-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(1.3);
  }
  
  20% {
    opacity: 1;
    transform: translateX(-50%) scale(1.3);
  }
  
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes door-decorations-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(1,0);
  }
  
  20% {
    opacity: 1;
    transform: translateX(-50%) scale(1,0);
  }
  
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes door-sign-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(15deg);
  }
  
  20% {
    opacity: 1;
    transform: translateX(-50%) rotate(15deg);
  }
  
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
  }
}

.bakery__door {
  @include position-absolute($bottom: 0, $left: 50%);
  
  width: $bakery-door-width;
  height: $bakery-door-height;
  
  opacity: 0;
  
  border: $bakery-door-border-width solid $bakery-door-border;
  border-bottom: $bakery-door-border-bottom-width solid $bakery-door-border;
  
  background-image: linear-gradient(45deg, transparent 0, transparent 20px, $bakery-door-shadow 20px, $bakery-door-shadow 29px, transparent 29px, transparent 40px, $bakery-door-shadow 40px, $bakery-door-shadow 60px, transparent 60px);
  background-color: $bakery-door-bg;
  
  box-shadow: 0 0 1px 1px rgba(0,0,0,.5);
  
  box-sizing: border-box;
  
  transform: translateX(-50%) scale(1.3);
  z-index: 4;
  
  animation: door-animation .3s linear 4.7s 1 forwards;
  
  //decorations styles
  &:before {
    @include position-absolute($top: 0, $left: 50%);
    
    content: '';
    display: block;
    width: $bakery-door-decorations-width;
    height: 100%;
    
    opacity: 0;
    
    transform: translateX(-50%) scale(1,0);
    transform-origin: canter center;
    
    border-left: $bakery-door-decorations-border solid $bakery-door-border;
    border-right: $bakery-door-decorations-border solid $bakery-door-border;
    background-image: linear-gradient(to top, transparent 0px, transparent 34px, $bakery-door-border 34px, $bakery-door-border 38px, transparent 38px);
    
    box-sizing: border-box;
    
    animation: door-decorations-animation .3s linear 5s 1 forwards;
    
  }
  
  //sign 'open'/'close'
  &:after {
    @include position-absolute($top: $bakery-door-sign-offset, $left: 50%);
    
    content: 'open';
    display: flex;
    align-items: center;
    justify-content: center;
    width: $bakery-door-sign-width;
    height: $bakery-door-sign-height;
    
    opacity: 0;
    
    transform: translateX(-50%) rotate(15deg);
    
    font: {
      family: 'Lato', sans-serif;
      size: $bakery-door-sign-font;
    }
    text-align: center;
    text-transform: uppercase;
    color: $bakery-door-sign-color;
    
    background-color: $bakery-door-sign-bg;
    
    animation: door-sign-animation .3s linear 5.3s 1 forwards;
  }
  
}

//roof: front part styles

//basic styles
$bakery-front-roof-offset: 14px;
$bakery-front-roof-offset2: 41px;
$bakery-front-roof-width: $front-part-width + $bakery-front-roof-offset*2;
$bakery-front-roof-height: 213px;

.bakery__roof-front-part {
  @include position-absolute($top: 0, $right: - $bakery-front-roof-offset2);
  
  width: $bakery-front-roof-width;
  height: $bakery-front-roof-height;
  
  z-index: 10;
}

//top block styles

$bakery-top-roof-angle-1: $bakery-basic-roof-angle * 0.6;
$bakery-top-roof-angle-2: $bakery-basic-roof-angle * 0.15;
$bakery-top-roof-2-offset: 159.9px;

$bakery-top-roof-block-1-bg: #fc552b;
$bakery-top-roof-block-2-bg: #d50505;

@keyframes roof-add-animation {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

.bakery__roof-top-block {
  @include position-absolute($top: 0, $right: $bakery-front-roof-offset2);
  
  width: 100%;
  height: 100%;
  
  z-index: 8;
  
  //top block #1
  &:before {
    @include position-absolute($top: 0, $left: $bakery-top-roof-angle-1/3.4);
    
    content: '';
    display: block;
    width: 100%;
    
    opacity: 0;
    
    width: calc(100% - #{$bakery-top-roof-angle-1}*1.5);
    
    border-bottom: $bakery-basic-roof-height*0.55 solid $bakery-top-roof-block-1-bg;
    border-left: $bakery-top-roof-angle-1 solid transparent;
    
    animation: roof-add-animation .2s linear 4.5s 1 forwards;
  }
  
  //top block #2
  &:after {
    @include position-absolute($top: 0, $left: $bakery-top-roof-2-offset);
    
    content: '';
    display: block;
    width: 100%;
    
    opacity: 0;
    
    width: calc(100% - #{$bakery-top-roof-angle-2}*5.3);
    
    border-bottom: $bakery-basic-roof-height*0.55 solid $bakery-top-roof-block-2-bg;
    border-left: $bakery-top-roof-angle-2 solid transparent;
    border-right: $bakery-top-roof-angle-2 solid transparent;
    
    animation: roof-add-animation .2s linear 4.3s 1 forwards;
  }
}

//decorations styles
$bakery-roof-top-small-decoration-height: 7px;
$bakery-roof-top-decoration-width: 211px;
$bakery-roof-top-shadow-height: 48px;
$bakery-roof-top-shadow-vert: -38.5px;
$bakery-roof-top-shadow-horz: -15px;

$bakery-roof-top-shadow-bg: #bf0506;
$bakery-roof-top-decoration-bg: #f87472;

@keyframes roof-decoration-animation {
  0% {
    opacity: 0;
    transform: scale(0,1);
  }
  
  20% {
    opacity: 1;
    transform: scale(0,1);
  }
  
  100% {
    opacity: 1;
    transform: scale(1,1);
  }
}

.bakery__roof-top-decorations {
  @include position-absolute($top: - $bakery-roof-top-small-decoration-height/2, $right: 0);
  
  width: $bakery-roof-top-decoration-width;
  
  //small decoration block at the top
  &:before {
    @include position-absolute($top: 0, $right: 0); 
    
    content: '';
    display: block;
    height: $bakery-roof-top-small-decoration-height;
    width: 100%;
    
    opacity: 0;
    
    transform: scale(0,1);
    transform-origin: left center;
    
    background-color: $bakery-roof-top-decoration-bg;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
    
   z-index: 10;
    
    animation: roof-decoration-animation .3s linear 4s 1 forwards;
  }
}

//main banner styles
$bakery-roof-main-sign-size: 50px;
$bakery-roof-main-sign-horz: 155px;
$bakery-roof-main-sign-vert: 25px;

$bakery-roof-main-sign-color: #fcdb7a;

@keyframes main-sign-animation {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes main-sign-animation2 {
  
  0% {
    text-shadow: -4px 4px 0  rgba(0,0,0,.35),
    0px 0px 0px rgba(255,255,255,.85);
  }
  
   100% {
    text-shadow: -4px 4px 0  rgba(0,0,0,.75),
    0px 0px 35px rgba(255,255,255,.85);
  }
  
}

.bakery__roof-main-sign {
  @include position-absolute($top: $bakery-roof-main-sign-vert, $left: $bakery-roof-main-sign-horz);
  
  text-align: center;
  
  opacity: 0;
  
  z-index: 10;
  
  transform: translateY(-20px);
  
  animation: main-sign-animation .4s cubic-bezier(0.14, 1.29, 0, 1.07) 8s 1 forwards;
  
  p {
    font: {
      family: 'Rammetto One', cursive;
      size: $bakery-roof-main-sign-size;
    }
    
    color: $bakery-roof-main-sign-color;
    text-shadow: -4px 4px 0  rgba(0,0,0,.35),
      0px 0px 0px rgba(255,255,255,.85);
    
    animation: main-sign-animation2 1.4s linear 8.4s infinite alternate;
  }
}

//bottom block styles
$bakery-roof-bottom-height: 119px;
$bakery-roof-border-width: 10px;
$bakery-roof-bottom-stripe-width: 37px;
$bakery-roof-bottom-stripe-height: 75px;

$bakery-roof-border-color: #641c1d;
$bakery-roof-bottom-grad1: #fc552b;
$bakery-roof-bottom-grad2: #fedc7b;
$bakery-roof-bottom-grad3: #d50505;
$bakery-roof-bottom-grad4: #fe9933;
$bakery-roof-bottom-shadow: #af835c;

@keyframes bottom-roof-animation {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  
  20% {
    opacity: 1;
    transform: translateY(-50px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.bakery__roof-bottom-block {
  @include position-absolute($bottom: 0, $left: 0);
  
  width: 100%;
  height: $bakery-roof-bottom-height;
  
  border-top: $bakery-roof-border-width solid $bakery-roof-border-color;
  
  box-sizing: border-box;
  
  opacity: 0;
  
  z-index: 10;
  
  transform: translateY(-50px);
  
  animation: bottom-roof-animation .35s cubic-bezier(1, -0.55, 1, 1.36) 3.6s 1 forwards;
  
  /* main block */
  &:before {
    @include position-absolute($top: 0, $left: 0);
    width: 100%;
    height: calc(100% -  #{$bakery-roof-bottom-stripe-width/4});
    
    background-image: 
    /* main stripes*/
    linear-gradient(to right, $bakery-roof-bottom-grad1 0, $bakery-roof-bottom-grad1 $bakery-roof-bottom-stripe-width, $bakery-roof-bottom-grad2 $bakery-roof-bottom-stripe-width, $bakery-roof-bottom-grad2 $bakery-roof-bottom-stripe-width*2),
     /* bleak */
     linear-gradient(to right, transparent 0, transparent 5%, #fff 30%, #fff 60%, transparent 95%),
    /*waves with stripes - color 1 */
    radial-gradient(circle, $bakery-roof-bottom-grad3 $bakery-roof-bottom-stripe-width/2, transparent 0),
    /*waves with stripes - color 2 */
    radial-gradient(circle, $bakery-roof-bottom-grad4 $bakery-roof-bottom-stripe-width/2, transparent 0);
  
  background-size: $bakery-roof-bottom-stripe-width*2 $bakery-roof-bottom-stripe-height, 100% 3px, $bakery-roof-bottom-stripe-width*2 $bakery-roof-bottom-stripe-width, $bakery-roof-bottom-stripe-width*2 $bakery-roof-bottom-stripe-width, $bakery-roof-bottom-stripe-width $bakery-roof-bottom-stripe-width;
  background-position: 0 0, 0 $bakery-roof-bottom-stripe-height - 1, -$bakery-roof-bottom-stripe-width/2 $bakery-roof-bottom-stripe-height - $bakery-roof-bottom-stripe-width/2, $bakery-roof-bottom-stripe-width/2 $bakery-roof-bottom-stripe-height - $bakery-roof-bottom-stripe-width/2;
  background-repeat: repeat-x, no-repeat, repeat-x, repeat-x;
    
    content: '';
    display: block;
    
    z-index: 10;
  }
  
  /*block shadow */
  &:after {
    @include position-absolute($bottom: 6px, $left: 50%);
    
    content: '';
    display: block;
    
    width: $front-part-width;
    height: $bakery-roof-bottom-stripe-width;
    
    transform: translateX(-50%);
    
    background-image: radial-gradient(circle,$bakery-roof-bottom-shadow $bakery-roof-bottom-stripe-width/2, transparent 0);
    
    background-size: $bakery-roof-bottom-stripe-width $bakery-roof-bottom-stripe-height - $bakery-roof-bottom-stripe-width/4 - 2;
    
    background-repeat: repeat-x;
    
    background-position: #{$bakery-roof-bottom-stripe-width/1.27} #{-$bakery-roof-bottom-stripe-width/2.8};
    
    z-index: 8;
  }
}

//windows styles
$bakery-window-height: 102px;
$bakery-window-width: 117px;
$bakery-window-vert-offset: 63px;
$bakery-window-horz-offset: (($front-part-width - $bakery-door-width)/2 - $bakery-window-width)/2 ;
$bakery-window-border-width: 6.5px;
$window-animation-offset: 30px;

$bakery-window-bg: #3f1c09;
$bakery-window-border: $bakery-door-border; 
$bakery-window-shadow: $bakery-door-shadow;

@keyframes window-left-animation {
  0% {
    opacity: 0;
    transform: translateX(- $window-animation-offset);
  }
  
  20% {
    opacity: 1;
    transform: translateX(- $window-animation-offset);
  }
  
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes window-right-animation {
  0% {
    opacity: 0;
    transform: translateX($window-animation-offset);
  }
  
  20% {
    opacity: 1;
    transform: translateX($window-animation-offset);
  }
  
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.bakery__window {
  @include position-absolute($top: $bakery-window-vert-offset);
  
  width: $bakery-window-width;
  height: $bakery-window-height;
  
  box-sizing: border-box;
  
  background-color: $bakery-window-bg;
  border: $bakery-window-border-width solid $bakery-window-border;
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
  
  //left window
  &--left {
    left: $bakery-window-horz-offset;
    display: flex;
    flex-direction: column;
    
    opacity: 0;
    
    transform: translateX(- $window-animation-offset);
      
    animation: window-left-animation .3s ease-out 5.8s 1 forwards;
  }
  
  //right window
  &--right {
    right: $bakery-window-horz-offset;
    
    opacity: 0;
    
    transform: translateX($window-animation-offset);
    
    background-image: linear-gradient(-135deg, transparent 0, transparent 40px, $bakery-window-shadow 40px, $bakery-window-shadow 58px, transparent 58px, transparent 68px, $bakery-window-shadow 68px, $bakery-window-shadow 76px, transparent 76px);
    
    animation: window-right-animation .3s ease-out 5.8s 1 forwards;
  }
}

//cake  styles
$cake-width: 80px;
$cake-height: 64px;
$cake-plate-height: 4px;

$cake-plate-bg: #cdcccb;

@keyframes cake-plate {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  
  20% {
    opacity: 1;
    transform: scale(.5);
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.cake {
  @include position-absolute($bottom: 0, $left: 50%);
  
  width: $cake-width;
  height: $cake-height;
  
  transform: translateX(-50%);
  
  //cake plate
  &:after {
    @include position-absolute($bottom: 0, $left: 0);
    
    content: '';
    display: block;
    
    opacity: 0;
    
    transform: scale(.5);
    
    width: 100%;
    height: $cake-plate-height;
    
    background-color: $cake-plate-bg;
    
    animation: cake-plate .2s linear 6.3s 1 forwards;
  }
}

//cake part common styles
$cake-part-bg: #fa7976;
$cake-shadow: #e07270;
$cake-decorations-color: #fff;

.cake__part {
  @include position-absolute($left: 50%);
  
  background-color: $cake-part-bg;
  
  //shadows common styles
  &:after {
    @include position-absolute($top: 0, $left:0);
    
    content: '';
    display: block;
    
    width: 0;
    height: 0;
  }
}

//cake bottom part styles
$cake-bottom-part-height: 20px;
$cake-bottom-part-width: $cake-width*.7;
$cake-bottom-decorations-height: 4px;

@keyframes cake-bottom-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(35deg);
  }
  
  20% {
    opacity: 1;
    transform: translateX(-50%) rotate(35deg);
  }
  
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
  }
}

@keyframes cake-top-animation {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(-35deg);
  }
  
  20% {
    opacity: 1;
    transform: translateX(-50%) rotate(-35deg);
  }
  
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
  }
}

.cake__part--bottom {
  bottom: $cake-plate-height;
  
  width: $cake-bottom-part-width;
  height: $cake-bottom-part-height;
  
  opacity: 0;
  
  transform: translateX(-50%) rotate(35deg);
  transform-origin: right center;
  
  animation: cake-bottom-animation .3s cubic-bezier(0.32, -0.18, 0.85, -0.47) 6.5s 1 forwards;
  
  //shadow
  &:after {
    border-left: $cake-bottom-part-width/2 solid transparent;
    border-right: $cake-bottom-part-width/2 solid $cake-shadow;
    border-top: $cake-bottom-part-height/2 solid transparent;
    border-bottom: $cake-bottom-part-height/2 solid $cake-shadow;
  }
  
  //decoration
  &:before {
    @include position-absolute($top: - $cake-bottom-decorations-height, $left: 0);
    
    content: '';
    display: block;
    
    width: 100%;
    height: $cake-bottom-decorations-height;
    
    background-image: radial-gradient(circle, $cake-decorations-color $cake-bottom-decorations-height, transparent 0);
    
    background-size: $cake-bottom-decorations-height*3 $cake-bottom-decorations-height*2;
    
    background-position: -$cake-bottom-decorations-height/2 0;
    
   background-repeat: repeat-x;
  }
}

//cake top part styles
$cake-top-part-height: 22px;
$cake-top-part-width: $cake-width*.5;

$cake-top-decorations-height: 17px;

.cake__part--top {
  bottom: ($cake-plate-height + $cake-bottom-part-height);
  
  width: $cake-top-part-width;
  height: $cake-top-part-height;
  
  opacity: 0;
  
  transform: translateX(-50%) rotate(-35deg);
  transform-origin: left center;
  
  animation: cake-top-animation .3s cubic-bezier(0.32, -0.18, 0.85, -0.47) 6.8s 1 forwards;
  
  //shadow
  &:after {
    border-left: $cake-top-part-width/2 solid transparent;
    border-right: $cake-top-part-width/2 solid $cake-shadow;
    border-top: $cake-top-part-height/2 solid transparent;
    border-bottom: $cake-top-part-height/2 solid $cake-shadow;
  }
  
  //decoration
  &:before {
    @include position-absolute($top: - $cake-top-decorations-height, $left: 50%);
    
    content: '';
    display: block;
    
    width: 85%;
    height: $cake-top-decorations-height;
    
    transform: translateX(-50%);
    
    background-image: radial-gradient(circle, $cake-decorations-color $cake-top-decorations-height/1.8, transparent 0);
    
    background-size: $cake-top-decorations-height*1.2 $cake-top-decorations-height*2;
    
   background-position: $cake-top-decorations-height 0;
    
   background-repeat: repeat-x;
  }
}

//left window shelves basic styles
$shelf-border: 4px;

$shelf-color: #844924;

@keyframes shelf-animation {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

.shelf {
  width: calc(100% - 1px);
  height: 33.33%;

  box-sizing: border-box;
  
  &--with-border {
      opacity: 0;
    
      border-bottom: $shelf-border solid $shelf-color;
    
    animation: shelf-animation .2s linear 6.1s 1 forwards;
  }
}

//dessert pack styles
.dessert-pack {
  position: relative;
  top: $shelf-border;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 95%;
  height: calc(100% - #{$shelf-border});
  margin: auto;
}

//3rd shelf desserts - donuts
$donuts-dimensions: 21px;
$donuts-offset: 3px;
$donut-hole-dimensions: 6px;

$donuts-bg-1: #f57877;
$donuts-bg-2: #feb880;

@keyframes donut-animation {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  
  20% {
    opacity: 1;
    transform: translateY(-15px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.donut {
  position: relative;
  width: $donuts-dimensions;
  height: $donuts-dimensions;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  opacity: 0;
  
  background-color: $donuts-bg-1;
  
  border-radius: 50%;
  
  transform: translateY(-15px);
  
  animation: donut-animation .2s linear 1 forwards;
  
  //donuts space in the center
  &:before {
    width: $donut-hole-dimensions;
    height: $donut-hole-dimensions;
    
    content: '';
    display: block;
    
    background-color: $bakery-window-bg;
    border-radius: 50%;
  }
  
  //alternative donuts color
  &:nth-child(2n) {
    background-color: $donuts-bg-2;
  }
  
  //offset for 1st donut
  &:first-child {
    margin-left: $donuts-offset*4;
    right: 0;
    
    animation-delay: 7.1s;
  }
  
  //offset for other donuts
  &:nth-child(2) {
    right: $donuts-offset;
    
    animation-delay: 7.15s;
  }
  
  &:nth-child(3) {
    right: $donuts-offset*2;
    
    animation-delay: 7.2s;
  }
  
  &:nth-child(4) {
    right: $donuts-offset*3;
    
    animation-delay: 7.25s;
  }
  
  &:nth-child(5) {
    right: $donuts-offset*4;
    
    animation-delay: 7.3s;
  }
}

//dessert styles
$dessert-offset: 6px;
$dessert-offset-big: 10px;

@keyframes dessert-animation {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  
  20% {
    opacity: 1;
    transform: scale(0);
  }
  
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.dessert {
  position: relative;
  margin-right: $dessert-offset;
  
  transform: scale(0);
  
  animation: dessert-animation .2s linear 1 forwards;
  
  &:last-child {
    margin-right: 0;
  }
}

.dessert-pack--bigger-dimension {
  
  .dessert {
    margin-right: $dessert-offset-big;
  }
  
  &:last-child {
    margin-right: 0;
  }
}

//dessert-1 styles
$dessert-1-width: 20px;
$dessert-1-height: 12px;

$dessert-1-bg: #c49e78;
$dessert-1-accent: #a52e2a;
$dessert-1-berry: #b93032;
$dessert-leaf: #4d9240;

$dessert-1-berry-height: 4px;
$dessert-1-berry-width: 10px;
$dessert-1-berry-leaf-height: 4px;
$dessert-1-berry-leaf-width: 6px;

.dessert--1 {
  width: $dessert-1-width;
  height: $dessert-1-height;
  
  opacity: 0;
  
  background-color: $dessert-1-bg;
  background-image: linear-gradient(to bottom, transparent 0, transparent $dessert-1-height/2, $dessert-1-accent 0);
  
  animation-delay: 7.45s;
  
  //berry
  &:before {
    @include position-absolute($top: -$dessert-1-berry-height, $left: 50%);
    
    content: '';
    display: block;
    
    width: $dessert-1-berry-width;
    height: $dessert-1-berry-height;
    
    background-color: $dessert-1-berry;
    border-radius: 50%/5px 50% 0 0;
    
    transform: translateX(-50%);
    
    z-index: 3;
  }
  
  //berry green part
  &:after {
    @include position-absolute($top: -$dessert-1-berry-leaf-height, $left: calc(50% + #{$dessert-1-berry-leaf-width/2}));
    
    content: '';
    display: block;
    
    width: $dessert-1-berry-leaf-width;
    height: $dessert-1-berry-leaf-height;
    
    background-color: $dessert-leaf;
    border-radius: 50%/4px 50% 0 0;
  
    z-index: 2;
  }
}

//dessert 2 styles
$dessert-2-width: 24px;
$dessert-2-height: 12px;

$dessert-2-bg: #c58d29;
$dessert-2-bg-2: #5a1f15;
$dessert-2-bg-3: #994a40;
$dessert-2-bg-4: #c4635d;
$dessert-2-cherry: #a50f39;

$dessert-2-cherry-dimensions: 7px;

$dessert-2-cherry-leaf-width: 8px;
$dessert-2-cherry-leaf-height: 3px;


.dessert--2 {
  width: $dessert-2-width;
  height: $dessert-2-height;
  
  opacity: 0;
  
  background-color: $dessert-2-bg;
  
  background-image: linear-gradient(to bottom, transparent 0, transparent 4px, $dessert-2-bg-3 0, $dessert-2-bg-3 7px, $dessert-2-bg-4 0, $dessert-2-bg-3 10px, $dessert-2-bg-2 0);
  
  animation-delay: 7.55s;
  
  //cherry styles
  &:before {
    @include position-absolute($top: -$dessert-2-cherry-dimensions, $left: 50%);
    
    content: '';
    display: block;
    
    width: $dessert-2-cherry-dimensions;
    height: $dessert-2-cherry-dimensions;
    
    background-color: $dessert-2-cherry;
    
    border-radius: 50%;
    
    transform: translateX(-50%);
    
    z-index: 3;
  }
  
  //cherry leaf
  &:after {
    @include position-absolute($top: -$dessert-2-cherry-leaf-height - 2, $left: calc(50% + #{$dessert-2-cherry-leaf-width/2 - 1})); 
    
    content: '';
    display: block;
    
    width: $dessert-2-cherry-leaf-width;
    height: $dessert-2-cherry-leaf-height;
    
    background-color: $dessert-leaf;
    
    border-radius: 50% 0 50% 0;
    
    z-index: 2;
  }
  
}

//dessert 3 styles
$dessert-3-width: 20px;
$dessert-3-height: 12px;

$dessert-3-bg: #ec9670;
$dessert-3-accent-1: #d61e20;
$dessert-3-accent-2: #5a1f15;
$dessert-3-accent-3: #702012;

$dessert-3-choco-width-1: 8px;
$dessert-3-choco-height-1: 4px;

$dessert-3-choco-width-2: 6px;
$dessert-3-choco-height-2: 3px;

.dessert--3 {
  width: $dessert-3-width;
  height: $dessert-3-height;
  
  opacity: 0;
  
  background-color: $dessert-3-bg;
  
  background-image: linear-gradient(to bottom, transparent 0, transparent 6px, $dessert-3-accent-1 0, $dessert-3-accent-1 9px, $dessert-3-accent-2 0);
  
  animation-delay: 7.65s;
  
  //chocolate
  &:before,
  &:after {
    content: '';
    display: block;
    
    background-color: $dessert-3-accent-3;
    
    border-radius: 50% 50% 0 0/4px 4px 0 0;
    transform: rotate(180deg);
  }
  
  &:before {
    @include position-absolute($top: 0, $right: 0);
      
    width: $dessert-3-choco-width-1;
    height: $dessert-3-choco-height-1;
  }
  
  &:after {
    @include position-absolute($top: 0, $right: $dessert-3-choco-width-1 - 2);
      
    width: $dessert-3-choco-width-2;
    height: $dessert-3-choco-height-2;
  }
}

//dessert 4 styles
$dessert-4-width: 17px;
$dessert-4-height: 12px;

$dessert-4-bg: #88473f;
$dessert-4-accent: #fa7976;
$dessert-4-decorations: #ee9850;

$dessert-4-big-decorations-width: 22px;
$dessert-4-big-decorations-height: 7px;
$dessert-4-small-decorations-width: 12px;
$dessert-4-small-decorations-height: 6px;

.dessert--4 {
  width: $dessert-4-width;
  height: $dessert-4-height;
  
  opacity: 0;
  
  background-color: $dessert-4-bg;
  
  background-image: linear-gradient(to right, transparent 0, transparent 3px, $dessert-4-accent 0, $dessert-4-accent 4px);
  
  background-size: 4px 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  
  animation-delay: 7.75s;
 
  //decorations
  &:before,
  &:after {
    content: '';
    display: block;
  }
  
  //bigger decorations
  &:before {
    @include position-absolute($top: -$dessert-4-big-decorations-height/2, $left: 50%);
    
    width: $dessert-4-big-decorations-width;
    height: $dessert-4-big-decorations-height;
    
    background-color: $dessert-4-decorations;
    
    border-radius: 50%;
    transform: translateX(-50%);
  }
  
  //smaller decorations
  &:after {
    @include position-absolute($top: -($dessert-4-big-decorations-height/2 + $dessert-4-small-decorations-height/2) + 1, $left: 50%);
    
    width: $dessert-4-small-decorations-width;
    height: $dessert-4-small-decorations-height;
    
    background-color: $dessert-4-decorations;
    
    border-radius: 50%;
    transform: translateX(-50%);
  }
}

//dessert 5 styles
$dessert-5-width: 17px;
$dessert-5-height: 12px;

$dessert-5-bg: #d5a892;
$dessert-5-accent: #9b5939;
$dessert-5-decoration: #f57877;
$dessert-5-berry: #a50f39;

$dessert-5-decorations-width: 22px;
$dessert-5-decorations-height: 5px;
$dessert-5-berry-dimensions: 5px;

.dessert--5 {
  width: $dessert-5-width;
  height: $dessert-5-height;
  
  opacity: 0;
  
  background-color: $dessert-5-bg;
  
  background-image: linear-gradient(to right, transparent 0, transparent 3px, $dessert-5-accent 0, $dessert-5-accent 4px);
  
  background-size: 4px 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  
  animation-delay: 7.85s;
  
  //decorations
  &:before {
    @include position-absolute($top: -$dessert-5-decorations-height/2, $left: 50%);
    
    width: $dessert-5-decorations-width;
    height: $dessert-5-decorations-height;
    
    content: '';
    display: block;
    
    background-color: $dessert-5-decoration; 
    border-radius: $dessert-5-decorations-height;
    
    transform: translateX(-50%);
  }
  
  &:after {
    @include position-absolute($top: - ($dessert-5-decorations-height/2 + $dessert-5-berry-dimensions/2), $left: 50%);
    
    width: $dessert-5-berry-dimensions;
    height: $dessert-5-berry-dimensions;
    
    content: '';
    display: block;
    
    background-color: $dessert-5-berry; 
    border-radius: $dessert-5-decorations-height;
    
    transform: translateX(-50%);
  }
}

//smoke styles
$smoke-container-width: 190px;
$smoke-container-height: 90px;
$smoke-vertical-offset: 80px;

$smoke-bg: #cccccc;

$bubble-big-width: 26px;
$bubble-big-height: 13px;
$bubble-big-left: 37px;
$bubble-big-top: 34px;

$bubble-small-width: 16px;
$bubble-small-height: 8px;
$bubble-small-left: 20px;
$bubble-small-top: 42px;

@keyframes smoke-big-animation {
  
  0% {
    left: $bubble-big-left;
    top: $bubble-big-top;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  
  20% {
    left: $bubble-big-left * 1.5;
    top: $bubble-big-top * .8;
    opacity: 1;
    transform: scale(1.3) rotate(10deg);
  }
  
  35% {
    left: $bubble-big-left * 1.8;
    top: $bubble-big-top * .5;
    opacity: .8;
    transform: scale(1.5) rotate(0deg);
  }
  
  50% {
    left: $bubble-big-left * 2;
    top: $bubble-big-top * .3;
    opacity: .5;
    transform: scale(1.8) rotate(-10deg);
  }
  
  65% {
    left: $bubble-big-left * 2.4;
    top: $bubble-big-top * .2;
    opacity: .3;
    transform: scale(2.2) rotate(0deg);
  }
  
  80% {
    left: $bubble-big-left * 2.6;
    top: $bubble-big-top * .1;
    opacity: 0;
    transform: scale(2.5) rotate(0deg);
  }
  
  100% {
    left: $bubble-big-left * 2.6;
    top: $bubble-big-top * .1;
    opacity: 0;
    transform: scale(2.5) rotate(0deg);
  }
}

@keyframes smoke-small-animation {
  
  0% {
    left: $bubble-small-left;
    top: $bubble-small-top;
    opacity: 0;
    transform: scale(1) rotate(0deg);
  }
  
  30% {
    left: $bubble-small-left;
    top: $bubble-small-top * .8;
    opacity: 0;
    transform: scale(1) rotate(0deg);
  }
  
  35% {
    left: $bubble-small-left * 1.3;
    top: $bubble-small-top * .8;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  
  50% {
    left: $bubble-small-left * 1.7;
    top: $bubble-small-top * .5;
    opacity: 1;
    transform: scale(1.5) rotate(-10deg);
  }
  
  65% {
    left: $bubble-small-left * 2.1;
    top: $bubble-small-top * .3;
    opacity: 1;
    transform: scale(1.8) rotate(0deg);
  }
  
  80% {
    left: $bubble-small-left * 2.4;
    top: $bubble-small-top * .2;
    opacity: 1;
    transform: scale(2.1) rotate(10deg);
  }
  
  100% {
    left: $bubble-small-left * 2.8;
    top: $bubble-small-top * .1;
    opacity: 0;
    transform: scale(2.5) rotate(0deg);
  }
}

.smoke {
  @include position-absolute($top: - $smoke-vertical-offset, $left: 0);
  
  width: $smoke-container-width;
  height: $smoke-container-height;
  
  z-index: 10;
  
  //bubbles styles
  &:before,
  &:after {
    content: '';
    display: block;
    
    background-color: $smoke-bg;
    
    border-radius: 50%;
  }
  
  &:before {
    @include position-absolute($top: $bubble-big-top, $left: $bubble-big-left);
    
    width: $bubble-big-width;
    height: $bubble-big-height;
    
    opacity: 0; //CHANGE IT!!!
    
    animation: smoke-big-animation 2s linear 8.5s infinite;
  }
  
  &:after {
    @include position-absolute($top: $bubble-small-top, $left: $bubble-small-left);
    
    width: $bubble-small-width;
    height: $bubble-small-height;
    
    opacity: 0;
    
    animation: smoke-small-animation 2s linear 8.5s infinite;
  }
}

            
          
!
            
              // used illustration from https://www.shutterstock.com/ru/image-vector/cool-set-detailed-flat-design-city-370468844?src=vOEW-0zRaRBEVVKBHfAqVg-1-93
// as a reference
            
          
!
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