/* snippet/TextEffect */


pre, code {
  font-family: Consolas, Courier, 'Andale Mono', monospace;
}

/* シンタックスリスト */

.label {
  margin: 1em 0;
  font-size: 1em;
}

.label span {
  font-size: 80%;
}

.synthax {
  background-color: #593869;
  font-size: 80%;
  text-align: left;
  white-space: normal;
  border-radius: 3px;
}

.synthax ol {
  padding: 0 0 0 3.8em;
}

.synthax ol li {
  margin: 0;
  padding: .3em .5em;
  color: white;
  background-color: white;
  line-height: 1.2;
}

.synthax ol li:nth-child(2n) {
  background-color: #f4f4f4;
}

.synthax ol li code {
  margin: 0;
  color: #333;
  white-space: pre;
}

/* contents */

#contents,
.section {
  width: 80%;
  max-width: 960px;
  margin: 0 auto;
  padding: 50px;
  box-sizing: border-box;
}

#contents {
  background-color: #e6c455;
}



.txtEffect {
  cursor: text;
}


p .txtEffect {
  font-weight: bold;
}

/* parent */

.txtEffect .c {
  display: inline-block;
  position: relative;
  color: transparent;
  perspective: 500px;
  perspective-origin: 0 50%;
  -webkit-animation: fade 1s;
  -webkit-animation-fill-mode: backwards;
  animation: fade 1s;
  animation-fill-mode: backwards;
}

@-webkit-keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* shadow */

.txtEffect .c::before {
  color: rgba(0,0,0,.1);
  -ms-transform: skewY(15deg);
  -webkit-transform: skewY(15deg);
  transform: skewY(15deg);
  -webkit-animation: shadow .6s;
  animation: shadow .6s;
}

.txtEffect .c:hover::before {
  -ms-transform: skewY(10deg);
  -webkit-transform: skewY(10deg);
  transform: skewY(10deg);
}

.txtEffect .c:active::before {
  -ms-transform: skewY(0deg);
  -webkit-transform: skewY(0deg);
  transform: skewY(0deg);
}

@-webkit-keyframes shadow {
  0% { -webkit-transform: skewY(45deg); }
  100% { -webkit-transform: skewY(15deg); }
}

@keyframes shadow {
  0% { transform: skewY(45deg); }
  100% { transform: skewY(15deg); }
}

/* main */

.txtEffect .c::after {
  color: #fff;
  -ms-transform: rotateY(-30deg);
  -webkit-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
  -webkit-animation: appear .6s;
  animation: appear .6s;
}

.txtEffect .c:hover::after {
  -ms-transform: rotateY(-20deg);
  -webkit-transform: rotateY(-20deg);
  transform: rotateY(-20deg);
}

.txtEffect .c:active::after {
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

@-webkit-keyframes appear {
  0% { -webkit-transform: rotateY(-90deg); }
  100% { -webkit-transform: rotateY(-30deg); }
}

@keyframes appear {
  0% { transform: rotateY(-90deg); }
  100% { transform: rotateY(-30deg); }
}

/* shadow, main */

.txtEffect .c::before,
.txtEffect .c::after {
  display: inline-block;
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
  -webkit-animation-fill-mode: backwards;
  -webkit-animation-timing-function: cubic-bezier(.8,.18,.38,1.28);
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(.8,.18,.38,1.28);
}

/* animation-delay */

.txtEffect .c:nth-child(1),
.txtEffect .c:nth-child(1)::before,
.txtEffect .c:nth-child(1)::after { -webkit-animation-delay: .1s; animation-delay: .1s; }
.txtEffect .c:nth-child(2),
.txtEffect .c:nth-child(2)::before,
.txtEffect .c:nth-child(2)::after, { -webkit-animation-delay: .2s; animation-delay: .2s; }
.txtEffect .c:nth-child(3),
.txtEffect .c:nth-child(3)::before,
.txtEffect .c:nth-child(3)::after { -webkit-animation-delay: .3s; animation-delay: .3s; }
.txtEffect .c:nth-child(4),
.txtEffect .c:nth-child(4)::before,
.txtEffect .c:nth-child(4)::after { -webkit-animation-delay: .4s; animation-delay: .4s; }
.txtEffect .c:nth-child(5),
.txtEffect .c:nth-child(5)::before,
.txtEffect .c:nth-child(5)::after { -webkit-animation-delay: .5s; animation-delay: .5s; }
.txtEffect .c:nth-child(6),
.txtEffect .c:nth-child(6)::before,
.txtEffect .c:nth-child(6)::after { -webkit-animation-delay: .6s; animation-delay: .6s; }
.txtEffect .c:nth-child(7),
.txtEffect .c:nth-child(7)::before,
.txtEffect .c:nth-child(7)::after { -webkit-animation-delay: .7s; animation-delay: .7s; }
.txtEffect .c:nth-child(8),
.txtEffect .c:nth-child(8)::before,
.txtEffect .c:nth-child(8)::after { -webkit-animation-delay: .8s; animation-delay: .8s; }
.txtEffect .c:nth-child(9),
.txtEffect .c:nth-child(9)::before,
.txtEffect .c:nth-child(9)::after { -webkit-animation-delay: .9s; animation-delay: .9s; }
.txtEffect .c:nth-child(10),
.txtEffect .c:nth-child(10)::before,
.txtEffect .c:nth-child(10)::after { -webkit-animation-delay: 1s; animation-delay: 1s; }
.txtEffect .c:nth-child(11),
.txtEffect .c:nth-child(11)::before,
.txtEffect .c:nth-child(11)::after { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.txtEffect .c:nth-child(12),
.txtEffect .c:nth-child(12)::before,
.txtEffect .c:nth-child(12)::after { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.txtEffect .c:nth-child(13),
.txtEffect .c:nth-child(13)::before,
.txtEffect .c:nth-child(13)::after { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
.txtEffect .c:nth-child(14),
.txtEffect .c:nth-child(14)::before,
.txtEffect .c:nth-child(14)::after { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.txtEffect .c:nth-child(15),
.txtEffect .c:nth-child(15)::before,
.txtEffect .c:nth-child(15)::after { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
.txtEffect .c:nth-child(16),
.txtEffect .c:nth-child(16)::before,
.txtEffect .c:nth-child(16)::after { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.txtEffect .c:nth-child(17),
.txtEffect .c:nth-child(17)::before,
.txtEffect .c:nth-child(17)::after { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; }
.txtEffect .c:nth-child(18),
.txtEffect .c:nth-child(18)::before,
.txtEffect .c:nth-child(18)::after { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
.txtEffect .c:nth-child(19),
.txtEffect .c:nth-child(19)::before,
.txtEffect .c:nth-child(19)::after { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }
.txtEffect .c:nth-child(20),
.txtEffect .c:nth-child(20)::before,
.txtEffect .c:nth-child(20)::after { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }
.txtEffect .c:nth-child(21),
.txtEffect .c:nth-child(21)::before,
.txtEffect .c:nth-child(21)::after { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; }
.txtEffect .c:nth-child(22),
.txtEffect .c:nth-child(22)::before,
.txtEffect .c:nth-child(22)::after { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }
.txtEffect .c:nth-child(23),
.txtEffect .c:nth-child(23)::before,
.txtEffect .c:nth-child(23)::after { -webkit-animation-delay: 2.3s; animation-delay: 2.3s; }
.txtEffect .c:nth-child(24),
.txtEffect .c:nth-child(24)::before,
.txtEffect .c:nth-child(24)::after { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
.txtEffect .c:nth-child(25),
.txtEffect .c:nth-child(25)::before,
.txtEffect .c:nth-child(25)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s; }
.txtEffect .c:nth-child(26),
.txtEffect .c:nth-child(26)::before,
.txtEffect .c:nth-child(26)::after { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; }
.txtEffect .c:nth-child(27),
.txtEffect .c:nth-child(27)::before,
.txtEffect .c:nth-child(27)::after { -webkit-animation-delay: 2.7s; animation-delay: 2.7s; }
.txtEffect .c:nth-child(28),
.txtEffect .c:nth-child(28)::before,
.txtEffect .c:nth-child(28)::after { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; }
.txtEffect .c:nth-child(29),
.txtEffect .c:nth-child(29)::before,
.txtEffect .c:nth-child(29)::after { -webkit-animation-delay: 2.9s; animation-delay: 2.9s; }
.txtEffect .c:nth-child(30),
.txtEffect .c:nth-child(30)::before,
.txtEffect .c:nth-child(30)::after { -webkit-animation-delay: 3s; animation-delay: 3s; }
.txtEffect .c:nth-child(31),
.txtEffect .c:nth-child(31)::before,
.txtEffect .c:nth-child(31)::after { -webkit-animation-delay: 3.1s; animation-delay: 3.1s; }
.txtEffect .c:nth-child(32),
.txtEffect .c:nth-child(32)::before,
.txtEffect .c:nth-child(32)::after { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; }
.txtEffect .c:nth-child(33),
.txtEffect .c:nth-child(33)::before,
.txtEffect .c:nth-child(33)::after { -webkit-animation-delay: 3.3s; animation-delay: 3.3s; }
.txtEffect .c:nth-child(34),
.txtEffect .c:nth-child(34)::before,
.txtEffect .c:nth-child(34)::after { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; }
.txtEffect .c:nth-child(35),
.txtEffect .c:nth-child(35)::before,
.txtEffect .c:nth-child(35)::after { -webkit-animation-delay: 3.5s; animation-delay: 3.5s; }
.txtEffect .c:nth-child(36),
.txtEffect .c:nth-child(36)::before,
.txtEffect .c:nth-child(36)::after { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }
.txtEffect .c:nth-child(37),
.txtEffect .c:nth-child(37)::before,
.txtEffect .c:nth-child(37)::after { -webkit-animation-delay: 3.7s; animation-delay: 3.7s; }
.txtEffect .c:nth-child(38),
.txtEffect .c:nth-child(38)::before,
.txtEffect .c:nth-child(38)::after { -webkit-animation-delay: 3.8s; animation-delay: 3.8s; }
.txtEffect .c:nth-child(39),
.txtEffect .c:nth-child(39)::before,
.txtEffect .c:nth-child(39)::after { -webkit-animation-delay: 3.9s; animation-delay: 3.9s; }
.txtEffect .c:nth-child(40),
.txtEffect .c:nth-child(40)::before,
.txtEffect .c:nth-child(40)::after { -webkit-animation-delay: 4s; animation-delay: 4s; }
.txtEffect .c:nth-child(41),
.txtEffect .c:nth-child(41)::before,
.txtEffect .c:nth-child(41)::after { -webkit-animation-delay: 4.1s; animation-delay: 4.1s; }
.txtEffect .c:nth-child(42),
.txtEffect .c:nth-child(42)::before,
.txtEffect .c:nth-child(42)::after { -webkit-animation-delay: 4.2s; animation-delay: 4.2s; }
.txtEffect .c:nth-child(43),
.txtEffect .c:nth-child(43)::before,
.txtEffect .c:nth-child(43)::after { -webkit-animation-delay: 4.3s; animation-delay: 4.3s; }
.txtEffect .c:nth-child(44),
.txtEffect .c:nth-child(44)::before,
.txtEffect .c:nth-child(44)::after { -webkit-animation-delay: 4.4s; animation-delay: 4.4s; }
.txtEffect .c:nth-child(45),
.txtEffect .c:nth-child(45)::before,
.txtEffect .c:nth-child(45)::after { -webkit-animation-delay: 4.5s; animation-delay: 4.5s; }
.txtEffect .c:nth-child(46),
.txtEffect .c:nth-child(46)::before,
.txtEffect .c:nth-child(46)::after { -webkit-animation-delay: 4.6s; animation-delay: 4.6s; }
.txtEffect .c:nth-child(47),
.txtEffect .c:nth-child(47)::before,
.txtEffect .c:nth-child(47)::after { -webkit-animation-delay: 4.7s; animation-delay: 4.7s; }
.txtEffect .c:nth-child(48),
.txtEffect .c:nth-child(48)::before,
.txtEffect .c:nth-child(48)::after { -webkit-animation-delay: 4.8s; animation-delay: 4.8s; }
.txtEffect .c:nth-child(49),
.txtEffect .c:nth-child(49)::before,
.txtEffect .c:nth-child(49)::after { -webkit-animation-delay: 4.9s; animation-delay: 4.9s; }
.txtEffect .c:nth-child(50),
.txtEffect .c:nth-child(50)::before,
.txtEffect .c:nth-child(50)::after { -webkit-animation-delay: 5s; animation-delay: 5s; }

/* IE9以下はパタパタしません */

.lte-ie9 .txtEffect {
  color: #fff;
}