This website uses cookies to ensure you get the best experience on our website.
Got it

A CSS hacks blog of from the Workshape.io crew.
Hacks are published weekly and are built using Stylus along with Nib.

Thank you

StuntsStunt #2 Macbook

  • HTML
  • Stylus (Source)
  • CSS (Output)

<div class="stunt-macbook">
  <div class="screen">
    <div class="inner-black"></div>
  </div>
  <div class="body">
    <div class="bevel">
      <div class="reflection"></div>
    </div>
    <div class="screws"></div>
  </div>
</div>
@import 'nib'

// ------------------------------[   Variables   ]------------------------------

color-alluminium-lighter = #eee
color-alluminium-light = #ddd
color-alluminium = #999
color-alluminium-dark = #555
screen-width = 450px
screen-height = 350px
content-spacing = 25px
camera-radius = 1px

// ------------------------------[     Mixins    ]------------------------------

filter(value)
    -webkit-filter value
    filter value

// ------------------------------[     Styles    ]------------------------------

.stunt-macbook
    width screen-width
    margin auto
    position relative
    perspective 100px
    perspective-origin 50% 110%
    top -25px

    // Back of the screen
    .screen
        border-radius 20px
        width 100%
        height screen-height
        overflow hidden
        position relative
        transform translate3d(0, 0, 0)

        // Alluminium back
        &:before
            border-radius 100%
            content ''
            position absolute
            width 130%
            padding-bottom @width
            left 50%
            top 50%
            transform translate(-50%, -50%)
            background radial-gradient(
                400px,
                color-alluminium-lighter,
                320px, color-alluminium
                )
            animation macbook-screen-alluminium-bg 1s

        // Camera
        &:after
            content ''
            position absolute
            left 50%
            top (content-spacing / 2) + 3px
            margin-left -(camera-radius)
            margin-top -(camera-radius)
            width camera-radius * 2
            height camera-radius * 2
            border-radius 100%
            background #a2f17c
            box-shadow rgba(#fff, .1) 0 0 0 1.5px, rgba(#a2f17c, .5) 0 0 3px 1px
            opacity 0
            animation fade-in .3s 2.5s forwards

        // Inner black screen frame
        .inner-black
            border-radius 18px
            content ''
            position absolute
            width (screen-width - 6px)
            height (screen-height - 6px)
            left 3px
            top 3px
            animation macbook-screen-inner-black 1s 1s forwards
            background radial-gradient(#333, #111)
            box-shadow rgba(#fff, .3) 0 0 .2px 2px inset
            margin-left -100%
            overflow hidden

            &:before
                content ''
                position absolute
                width (screen-width - content-spacing * 2)
                height (screen-height - content-spacing * 2)
                transform translate3d(-50%, -50%, 0) scale(0)
                left 50%
                top 50%
                background #333
                animation macbook-screen-content 1s 1s forwards

            // Shine
            &:after
                position absolute
                content ''
                width 100%
                height 200%
                left 50%
                top -95%
                background linear-gradient(45deg, rgba(#fff, 0), rgba(#fff, 1))
                opacity .2
                transform rotate(-20deg)
                margin-left 100%
                animation macbook-screen-shine 1s 1.5s forwards

    // Alluminium body edge
    .body
        position absolute
        left 50%
        top 100%
        transform translate3d(-50%, 0, 25px)
        width 100%
        box-shadow rgba(#fff, .5) 0 10px 10px 0 inset
        background linear-gradient(
            90deg,
            color-alluminium,
            1% color-alluminium-lighter,
            5% color-alluminium-light,
            50% darken(color-alluminium-light, 5%),
            95% color-alluminium-light,
            99% color-alluminium-lighter,
            100% color-alluminium
            )
        animation macbook-body .5s 2.5s forwards

        // Grip
        &:after
            border-radius 0 0 6px 6px
            transform translate3d(-50%, 0, 0)
            content ''
            position absolute
            left 50%
            top 0
            padding-bottom 1.6%
            background linear-gradient(
                rgba(#000, .2),
                30% rgba(#000, .1),
                rgba(#000, .5)
                )
            animation macbook-body-grip .3s 3.5s forwards

        // Led
        &:before
            border-radius 2px
            content ''
            position absolute
            right 4.5%
            background black
            top 50%
            padding-bottom .4%
            margin-top -(@padding-bottom / 2)
            animation macbook-body-led .5s 3.2s forwards

        // Alluminium body bevel
        .bevel

            // Bevel + Reflection
            &:after, .reflection
                border-radius 0 0 20px 20px
                content ''
                position absolute
                left 30%
                top 100%
                width (100% / 2.5)

            // Bevel
            &:after
                transform scaleX(2.5)
                background linear-gradient(
                    darken(color-alluminium-light, 15%),
                    80% darken(color-alluminium, 5%),
                    100% color-alluminium-dark
                    )
                animation macbook-bevel .5s 3.3s forwards

             // Reflection
            .reflection
                top 150%
                transform scaleX(2.5) rotate(180deg)
                background linear-gradient(
                    rgba(color-alluminium-dark, 0),
                    40% rgba(color-alluminium-dark, .1),
                    rgba(color-alluminium-dark, .2)
                    )
                opacity 0
                animation macbook-bevel-reflection .5s 3.6s forwards
                padding-bottom 2%

            // Bevel shadow
            &:before
                border-radius 100%
                filter blur(1px)
                content ''
                position absolute
                width 90%
                padding-bottom 1%
                background black
                top 140%
                left 5%
                opacity 0
                animation macbook-bevel-shadow 1s 4s forwards

        // Body screws
        .screws

            &:before, &:after
                border-radius 100%
                content ''
                width 6px
                transform scaleY(.45)
                background linear-gradient(rgba(#000, .8), rgba(#000, .3))
                position absolute
                animation macbook-body-screw .5s 4.2s forwards
                top 120%

            // Left screw
            &:before
                left 8%

            // Right screw
            &:after
                right 8%

// ------------------------------[   Animations  ]------------------------------

@keyframes macbook-screen-alluminium-bg {

    from {
        transform translate(-50%, -50%) scale(0)
    }

    to {
        transform translate(-50%, -50%) scale(1)
    }

}

@keyframes macbook-screen-shine {

    from {
        margin-left 100%
    }

    to {
        margin-left 0
    }

}

@keyframes macbook-body {

    from {
        padding-bottom 0
    }

    to {
        padding-bottom 3.3%
    }

}

@keyframes macbook-bevel {

    from {
        padding-bottom 0
    }

    to {
        padding-bottom 2%
    }

}

@keyframes macbook-bevel-shadow {

    from {
        opacity 0
    }

    to {
        opacity .9
    }
}

@keyframes macbook-body-grip {

    from {
        width 0
    }

    to {
        width 15%
    }

}

@keyframes macbook-body-screw {

    from {
        height 0
    }

    to {
        height 6px
    }

}

@keyframes macbook-body-led {

    from {
        width 0
    }

    to {
        width 3.4%
    }

}

@keyframes macbook-screen-content {

    from {
        transform translate3d(100%, -50%, 0) rotate(-180deg) scale(0)
    }

    to {
        transform translate3d(-50%, -50%, 0) rotate(0deg) scale(1)
    }

}

@keyframes fade-in {

    from {
        opacity 0
    }

    to {
        opacity 1
    }

}

@keyframes macbook-screen-inner-black {

    from {
        margin-left -100%
    }

    to {
        margin-left 0
    }

}

@keyframes macbook-bevel-reflection {

    from {
        margin-top -2%
        opacity 0
    }

    to {
        margin-top 0
        opacity 1
    }

}
.stunt-macbook {
  width: 450px;
  margin: auto;
  position: relative;
  -webkit-perspective: 100px;
  -moz-perspective: 100px;
  -ms-perspective: 100px;
  perspective: 100px;
  -webkit-perspective-origin: 50% 110%;
  -moz-perspective-origin: 50% 110%;
  -ms-perspective-origin: 50% 110%;
  perspective-origin: 50% 110%;
  top: -25px;
}
.stunt-macbook .screen {
  border-radius: 20px;
  width: 100%;
  height: 350px;
  overflow: hidden;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.stunt-macbook .screen:before {
  border-radius: 100%;
  content: '';
  position: absolute;
  width: 130%;
  padding-bottom: 130%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: -webkit-radial-gradient(400px, #eee, 320px, #999);
  background: -moz-radial-gradient(400px, #eee, 320px, #999);
  background: -o-radial-gradient(400px, #eee, 320px, #999);
  background: -ms-radial-gradient(400px, #eee, 320px, #999);
  background: radial-gradient(400px, #eee, 320px, #999);
  -webkit-animation: macbook-screen-alluminium-bg 1s;
  -moz-animation: macbook-screen-alluminium-bg 1s;
  -o-animation: macbook-screen-alluminium-bg 1s;
  -ms-animation: macbook-screen-alluminium-bg 1s;
  animation: macbook-screen-alluminium-bg 1s;
}
.stunt-macbook .screen:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 15.5px;
  margin-left: -1px;
  margin-top: -1px;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background: #a2f17c;
  -webkit-box-shadow: rgba(255,255,255,0.1) 0 0 0 1.5px, rgba(162,241,124,0.5) 0 0 3px 1px;
  box-shadow: rgba(255,255,255,0.1) 0 0 0 1.5px, rgba(162,241,124,0.5) 0 0 3px 1px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-animation: fade-in 0.3s 2.5s forwards;
  -moz-animation: fade-in 0.3s 2.5s forwards;
  -o-animation: fade-in 0.3s 2.5s forwards;
  -ms-animation: fade-in 0.3s 2.5s forwards;
  animation: fade-in 0.3s 2.5s forwards;
}
.stunt-macbook .screen .inner-black {
  border-radius: 18px;
  content: '';
  position: absolute;
  width: 444px;
  height: 344px;
  left: 3px;
  top: 3px;
  -webkit-animation: macbook-screen-inner-black 1s 1s forwards;
  -moz-animation: macbook-screen-inner-black 1s 1s forwards;
  -o-animation: macbook-screen-inner-black 1s 1s forwards;
  -ms-animation: macbook-screen-inner-black 1s 1s forwards;
  animation: macbook-screen-inner-black 1s 1s forwards;
  background: -webkit-radial-gradient(#333, #111);
  background: -moz-radial-gradient(#333, #111);
  background: -o-radial-gradient(#333, #111);
  background: -ms-radial-gradient(#333, #111);
  background: radial-gradient(#333, #111);
  -webkit-box-shadow: rgba(255,255,255,0.3) 0 0 0.2px 2px inset;
  box-shadow: rgba(255,255,255,0.3) 0 0 0.2px 2px inset;
  margin-left: -100%;
  overflow: hidden;
}
.stunt-macbook .screen .inner-black:before {
  content: '';
  position: absolute;
  width: 400px;
  height: 300px;
  -webkit-transform: translate3d(-50%, -50%, 0) scale(0);
  -moz-transform: translate3d(-50%, -50%, 0) scale(0);
  -o-transform: translate3d(-50%, -50%, 0) scale(0);
  -ms-transform: translate3d(-50%, -50%, 0) scale(0);
  transform: translate3d(-50%, -50%, 0) scale(0);
  left: 50%;
  top: 50%;
  background: #333;
  -webkit-animation: macbook-screen-content 1s 1s forwards;
  -moz-animation: macbook-screen-content 1s 1s forwards;
  -o-animation: macbook-screen-content 1s 1s forwards;
  -ms-animation: macbook-screen-content 1s 1s forwards;
  animation: macbook-screen-content 1s 1s forwards;
}
.stunt-macbook .screen .inner-black:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 200%;
  left: 50%;
  top: -95%;
  background: -webkit-linear-gradient(45deg, rgba(255,255,255,0), #fff);
  background: -moz-linear-gradient(45deg, rgba(255,255,255,0), #fff);
  background: -o-linear-gradient(45deg, rgba(255,255,255,0), #fff);
  background: -ms-linear-gradient(45deg, rgba(255,255,255,0), #fff);
  background: linear-gradient(45deg, rgba(255,255,255,0), #fff);
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  -webkit-filter: alpha(opacity=20);
  filter: alpha(opacity=20);
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  margin-left: 100%;
  -webkit-animation: macbook-screen-shine 1s 1.5s forwards;
  -moz-animation: macbook-screen-shine 1s 1.5s forwards;
  -o-animation: macbook-screen-shine 1s 1.5s forwards;
  -ms-animation: macbook-screen-shine 1s 1.5s forwards;
  animation: macbook-screen-shine 1s 1.5s forwards;
}
.stunt-macbook .body {
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate3d(-50%, 0, 25px);
  -moz-transform: translate3d(-50%, 0, 25px);
  -o-transform: translate3d(-50%, 0, 25px);
  -ms-transform: translate3d(-50%, 0, 25px);
  transform: translate3d(-50%, 0, 25px);
  width: 100%;
  -webkit-box-shadow: rgba(255,255,255,0.5) 0 10px 10px 0 inset;
  box-shadow: rgba(255,255,255,0.5) 0 10px 10px 0 inset;
  background: -webkit-linear-gradient(0deg, #999, #eee 1%, #ddd 5%, #d2d2d2 50%, #ddd 95%, #eee 99%, #999 100%);
  background: -moz-linear-gradient(0deg, #999, #eee 1%, #ddd 5%, #d2d2d2 50%, #ddd 95%, #eee 99%, #999 100%);
  background: -o-linear-gradient(0deg, #999, #eee 1%, #ddd 5%, #d2d2d2 50%, #ddd 95%, #eee 99%, #999 100%);
  background: -ms-linear-gradient(0deg, #999, #eee 1%, #ddd 5%, #d2d2d2 50%, #ddd 95%, #eee 99%, #999 100%);
  background: linear-gradient(90deg, #999, #eee 1%, #ddd 5%, #d2d2d2 50%, #ddd 95%, #eee 99%, #999 100%);
  -webkit-animation: macbook-body 0.5s 2.5s forwards;
  -moz-animation: macbook-body 0.5s 2.5s forwards;
  -o-animation: macbook-body 0.5s 2.5s forwards;
  -ms-animation: macbook-body 0.5s 2.5s forwards;
  animation: macbook-body 0.5s 2.5s forwards;
}
.stunt-macbook .body:after {
  border-radius: 0 0 6px 6px;
  -webkit-transform: translate3d(-50%, 0, 0);
  -moz-transform: translate3d(-50%, 0, 0);
  -o-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  padding-bottom: 1.6%;
  background: -webkit-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5));
  background: -moz-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5));
  background: -o-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5));
  background: -ms-linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5));
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.5));
  -webkit-animation: macbook-body-grip 0.3s 3.5s forwards;
  -moz-animation: macbook-body-grip 0.3s 3.5s forwards;
  -o-animation: macbook-body-grip 0.3s 3.5s forwards;
  -ms-animation: macbook-body-grip 0.3s 3.5s forwards;
  animation: macbook-body-grip 0.3s 3.5s forwards;
}
.stunt-macbook .body:before {
  border-radius: 2px;
  content: '';
  position: absolute;
  right: 4.5%;
  background: #000;
  top: 50%;
  padding-bottom: 0.4%;
  margin-top: -0.2%;
  -webkit-animation: macbook-body-led 0.5s 3.2s forwards;
  -moz-animation: macbook-body-led 0.5s 3.2s forwards;
  -o-animation: macbook-body-led 0.5s 3.2s forwards;
  -ms-animation: macbook-body-led 0.5s 3.2s forwards;
  animation: macbook-body-led 0.5s 3.2s forwards;
}
.stunt-macbook .body .bevel:after,
.stunt-macbook .body .bevel .reflection {
  border-radius: 0 0 20px 20px;
  content: '';
  position: absolute;
  left: 30%;
  top: 100%;
  width: 40%;
}
.stunt-macbook .body .bevel:after {
  -webkit-transform: scaleX(2.5);
  -moz-transform: scaleX(2.5);
  -o-transform: scaleX(2.5);
  -ms-transform: scaleX(2.5);
  transform: scaleX(2.5);
  background: -webkit-linear-gradient(#bcbcbc, #919191 80%, #555 100%);
  background: -moz-linear-gradient(#bcbcbc, #919191 80%, #555 100%);
  background: -o-linear-gradient(#bcbcbc, #919191 80%, #555 100%);
  background: -ms-linear-gradient(#bcbcbc, #919191 80%, #555 100%);
  background: linear-gradient(#bcbcbc, #919191 80%, #555 100%);
  -webkit-animation: macbook-bevel 0.5s 3.3s forwards;
  -moz-animation: macbook-bevel 0.5s 3.3s forwards;
  -o-animation: macbook-bevel 0.5s 3.3s forwards;
  -ms-animation: macbook-bevel 0.5s 3.3s forwards;
  animation: macbook-bevel 0.5s 3.3s forwards;
}
.stunt-macbook .body .bevel .reflection {
  top: 150%;
  -webkit-transform: scaleX(2.5) rotate(180deg);
  -moz-transform: scaleX(2.5) rotate(180deg);
  -o-transform: scaleX(2.5) rotate(180deg);
  -ms-transform: scaleX(2.5) rotate(180deg);
  transform: scaleX(2.5) rotate(180deg);
  background: -webkit-linear-gradient(rgba(85,85,85,0), rgba(85,85,85,0.1) 40%, rgba(85,85,85,0.2));
  background: -moz-linear-gradient(rgba(85,85,85,0), rgba(85,85,85,0.1) 40%, rgba(85,85,85,0.2));
  background: -o-linear-gradient(rgba(85,85,85,0), rgba(85,85,85,0.1) 40%, rgba(85,85,85,0.2));
  background: -ms-linear-gradient(rgba(85,85,85,0), rgba(85,85,85,0.1) 40%, rgba(85,85,85,0.2));
  background: linear-gradient(rgba(85,85,85,0), rgba(85,85,85,0.1) 40%, rgba(85,85,85,0.2));
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-animation: macbook-bevel-reflection 0.5s 3.6s forwards;
  -moz-animation: macbook-bevel-reflection 0.5s 3.6s forwards;
  -o-animation: macbook-bevel-reflection 0.5s 3.6s forwards;
  -ms-animation: macbook-bevel-reflection 0.5s 3.6s forwards;
  animation: macbook-bevel-reflection 0.5s 3.6s forwards;
  padding-bottom: 2%;
}
.stunt-macbook .body .bevel:before {
  border-radius: 100%;
  -webkit-filter: blur(1px);
  filter: blur(1px);
  content: '';
  position: absolute;
  width: 90%;
  padding-bottom: 1%;
  background: #000;
  top: 140%;
  left: 5%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-filter: alpha(opacity=0);
  filter: alpha(opacity=0);
  -webkit-animation: macbook-bevel-shadow 1s 4s forwards;
  -moz-animation: macbook-bevel-shadow 1s 4s forwards;
  -o-animation: macbook-bevel-shadow 1s 4s forwards;
  -ms-animation: macbook-bevel-shadow 1s 4s forwards;
  animation: macbook-bevel-shadow 1s 4s forwards;
}
.stunt-macbook .body .screws:before,
.stunt-macbook .body .screws:after {
  border-radius: 100%;
  content: '';
  width: 6px;
  -webkit-transform: scaleY(0.45);
  -moz-transform: scaleY(0.45);
  -o-transform: scaleY(0.45);
  -ms-transform: scaleY(0.45);
  transform: scaleY(0.45);
  background: -webkit-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  background: -moz-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  background: -o-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  background: -ms-linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  position: absolute;
  -webkit-animation: macbook-body-screw 0.5s 4.2s forwards;
  -moz-animation: macbook-body-screw 0.5s 4.2s forwards;
  -o-animation: macbook-body-screw 0.5s 4.2s forwards;
  -ms-animation: macbook-body-screw 0.5s 4.2s forwards;
  animation: macbook-body-screw 0.5s 4.2s forwards;
  top: 120%;
}
.stunt-macbook .body .screws:before {
  left: 8%;
}
.stunt-macbook .body .screws:after {
  right: 8%;
}
@-moz-keyframes macbook-screen-alluminium-bg {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -o-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}
@-webkit-keyframes macbook-screen-alluminium-bg {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -o-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}
@-o-keyframes macbook-screen-alluminium-bg {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -o-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes macbook-screen-alluminium-bg {
  from {
    -webkit-transform: translate(-50%, -50%) scale(0);
    -moz-transform: translate(-50%, -50%) scale(0);
    -o-transform: translate(-50%, -50%) scale(0);
    -ms-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -moz-transform: translate(-50%, -50%) scale(1);
    -o-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
  }
}
@-moz-keyframes macbook-screen-shine {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}
@-webkit-keyframes macbook-screen-shine {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}
@-o-keyframes macbook-screen-shine {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}
@keyframes macbook-screen-shine {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0;
  }
}
@-moz-keyframes macbook-body {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 3.3%;
  }
}
@-webkit-keyframes macbook-body {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 3.3%;
  }
}
@-o-keyframes macbook-body {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 3.3%;
  }
}
@keyframes macbook-body {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 3.3%;
  }
}
@-moz-keyframes macbook-bevel {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 2%;
  }
}
@-webkit-keyframes macbook-bevel {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 2%;
  }
}
@-o-keyframes macbook-bevel {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 2%;
  }
}
@keyframes macbook-bevel {
  from {
    padding-bottom: 0;
  }
  to {
    padding-bottom: 2%;
  }
}
@-moz-keyframes macbook-bevel-shadow {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -webkit-filter: alpha(opacity=90);
    filter: alpha(opacity=90);
  }
}
@-webkit-keyframes macbook-bevel-shadow {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -webkit-filter: alpha(opacity=90);
    filter: alpha(opacity=90);
  }
}
@-o-keyframes macbook-bevel-shadow {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -webkit-filter: alpha(opacity=90);
    filter: alpha(opacity=90);
  }
}
@keyframes macbook-bevel-shadow {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -webkit-filter: alpha(opacity=90);
    filter: alpha(opacity=90);
  }
}
@-moz-keyframes macbook-body-grip {
  from {
    width: 0;
  }
  to {
    width: 15%;
  }
}
@-webkit-keyframes macbook-body-grip {
  from {
    width: 0;
  }
  to {
    width: 15%;
  }
}
@-o-keyframes macbook-body-grip {
  from {
    width: 0;
  }
  to {
    width: 15%;
  }
}
@keyframes macbook-body-grip {
  from {
    width: 0;
  }
  to {
    width: 15%;
  }
}
@-moz-keyframes macbook-body-screw {
  from {
    height: 0;
  }
  to {
    height: 6px;
  }
}
@-webkit-keyframes macbook-body-screw {
  from {
    height: 0;
  }
  to {
    height: 6px;
  }
}
@-o-keyframes macbook-body-screw {
  from {
    height: 0;
  }
  to {
    height: 6px;
  }
}
@keyframes macbook-body-screw {
  from {
    height: 0;
  }
  to {
    height: 6px;
  }
}
@-moz-keyframes macbook-body-led {
  from {
    width: 0;
  }
  to {
    width: 3.4%;
  }
}
@-webkit-keyframes macbook-body-led {
  from {
    width: 0;
  }
  to {
    width: 3.4%;
  }
}
@-o-keyframes macbook-body-led {
  from {
    width: 0;
  }
  to {
    width: 3.4%;
  }
}
@keyframes macbook-body-led {
  from {
    width: 0;
  }
  to {
    width: 3.4%;
  }
}
@-moz-keyframes macbook-screen-content {
  from {
    -webkit-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -moz-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -o-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -ms-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
}
@-webkit-keyframes macbook-screen-content {
  from {
    -webkit-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -moz-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -o-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -ms-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
}
@-o-keyframes macbook-screen-content {
  from {
    -webkit-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -moz-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -o-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -ms-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
}
@keyframes macbook-screen-content {
  from {
    -webkit-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -moz-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -o-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    -ms-transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
    transform: translate3d(100%, -50%, 0) rotate(-180deg) scale(0);
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
}
@-moz-keyframes fade-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@-o-keyframes fade-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@-moz-keyframes macbook-screen-inner-black {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}
@-webkit-keyframes macbook-screen-inner-black {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}
@-o-keyframes macbook-screen-inner-black {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}
@keyframes macbook-screen-inner-black {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0;
  }
}
@-moz-keyframes macbook-bevel-reflection {
  from {
    margin-top: -2%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@-webkit-keyframes macbook-bevel-reflection {
  from {
    margin-top: -2%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@-o-keyframes macbook-bevel-reflection {
  from {
    margin-top: -2%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
@keyframes macbook-bevel-reflection {
  from {
    margin-top: -2%;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
  }
  to {
    margin-top: 0;
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    filter: none;
  }
}
Posted the 28/04/2016
Browse more