.area
  .rect.-flicker
    p.rect-text キャラクター原案
  .rect.-flicker
    p.rect-text OPテーマ カミイロアワセ
  .rect.-flicker
    p.rect-text キャラクターデザイン
  
View Compiled
body{
  background-color: #F4EBE8;
  margin-top: 100px;
}

.area{
  display: block;
  position: relative;
  background-color: #F4EBE8;
  width: 900px;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.rectBase{
  width: 100%;
  display: block;
}

.rectAngle{
  transform: rotate(-10deg);
}

.rectAngle_2{
  transform: rotate(13deg);
}


.animation-fadeIn{
	animation: fadein 1.2s cubic-bezier(0.65, 0, 0.18, 1.04) forwards .3s;
}

@keyframes fadein {
	0%{
      height: 0px;
	}
	100%{
      height: 35px;
	}
}

/*
* CutInAnimation
* .rect-textクラスに初期値として left: -30%;が必要
*/
.animation-textCutIn{
	animation: textCutIn 1.2s cubic-bezier(0.65, 0, 0.18, 1.04) forwards 1.3s;
}

@keyframes textCutIn {
	0%{
      left: -30%;
	}
	100%{
      left: 80%;
	}
}


/*
* flicker
* .rect-textクラスに初期値として opacity: 0;が必要
*/
.animation-textFlicker{
	animation: textFlicker .5s cubic-bezier(0.65, 0, 0.18, 1.04) forwards 1.5s;
}

@keyframes textFlicker {
  0%{
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  25%{
    opacity: 0;
  }
  35%{
    opacity: 1;
  }
  45%{
    opacity: 0;
  }
  55%{
    opacity: 1;
  }
  100%{
    opacity: 1;
  }
}

.rect{
  @extend .rectBase;
  @extend .rectAngle;
  @extend .animation-fadeIn;
  position: absolute;
  bottom: 100px;
  right: 0;
  background-color: #E15A97;
  height: 0px;
  line-height: 35px;
  overflow: hidden;
  &:nth-of-type(2){
    bottom: 140px;
  }
  &:nth-of-type(3){
    bottom: 180px;
  }
  p{
      color: #fff;
      position: relative;
      display: inline;
      font-size: thin;
  }
  &.-flicker{
    p{
       opacity: 0;
       left: 78%;
       @extend .animation-textFlicker;
    }
  }
  &.-cutin{
     p{
       left: -30%;
       @extend .animation-textCutIn;
    }
  }
}

.rect_2{
  @extend .rectBase;
  @extend .rectAngle_2;
  @extend .animation-fadeIn;
  position: absolute;
  top: 200px;
  right: 0;
  background-color: #FFD7D6;
  height: 0px;
  line-height: 35px;
  overflow: hidden;
  p{
      color: #E15A97;
      position: relative;
      display: inline;
      font-size: thin;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.