pug-stylus-coffee-nuxt/components/Logo.vue

<template lang="pug">
  .VueToNuxtLogo
    .Triangle.Triangle--two
    .Triangle.Triangle--one
    .Triangle.Triangle--three
    .Triangle.Triangle--four
</template>


<style lang="stylus">
.VueToNuxtLogo
  display: inline-block
  animation: turn 2s linear forwards 1s
  transform: rotateX(180deg)
  position: relative
  overflow: hidden
  height: 180px
  width: 245px

.Triangle
  position: absolute
  top: 0
  left: 0
  width: 0
  height: 0

.Triangle--one
  border-left: 105px solid transparent
  border-right: 105px solid transparent
  border-bottom: 180px solid #41b883

.Triangle--two
  top: 30px
  left: 35px
  animation: goright 0.5s linear forwards 3.5s
  border-left: 87.5px solid transparent
  border-right: 87.5px solid transparent
  border-bottom: 150px solid #3b8070

.Triangle--three
  top: 60px
  left: 35px
  animation: goright 0.5s linear forwards 3.5s
  border-left: 70px solid transparent
  border-right: 70px solid transparent
  border-bottom: 120px solid #35495e

.Triangle--four
  top: 120px
  left: 70px
  animation: godown 0.5s linear forwards 3s
  border-left: 35px solid transparent
  border-right: 35px solid transparent
  border-bottom: 60px solid #fff

@keyframes turn
  100%
    transform: rotateX(0deg)

@keyframes godown
  100%
    top: 180px

@keyframes goright
  100%
    left: 70px
</style>