p {
  padding: 10px 0;
}

/*.mark1 {*/
/*  background: linear-gradient(transparent 0%, yellow 0%);*/
/*}*/
/*.mark2 {*/
/*  background: linear-gradient(transparent 20%, yellow 0%);*/
/*}*/
/*.mark3 {*/
/*  background: linear-gradient(transparent 40%, yellow 0%);*/
/*}*/
/*.mark4 {*/
/*  background: linear-gradient(transparent 60%, yellow 0%);*/
/*}*/
.mark4.js-mark {
  animation
}
.mark5 {
  background: linear-gradient(transparent 80%, yellow 0%);
}

.mm1 {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 100%;
  transition: 1s ease-out;
}
.mm1.inview {
  background-size: 100% 100%;
}
.mm2 {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 80%;
  transition: 1s ease-out;
}
.mm2.inview {
  background-size: 100% 80%;
}
.mm1b {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #7af0ff, #7af0ff);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 100%;
  transition: 1s ease-out;
}
.mm1b.inview {
  background-size: 100% 100%;
}
.mm2b {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #7af0ff, #7af0ff);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 80%;
  transition: 1s ease-out;
}
.mm2b.inview {
  background-size: 100% 80%;
}
.mm3 {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 60%;
  transition: 1s ease-out;
}
.mm3.inview {
  background-size: 100% 60%;
}
  .mm3b {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #7af0ff, #7af0ff);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 60%;
  transition: 1s ease-out;
}
.mm3b.inview {
  background-size: 100% 60%;
}
.mm4{
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 40%;
  transition: 1s ease-out;
}
.mm4.inview {
  background-size: 100% 40%;
}
  .mm4b {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #7af0ff, #7af0ff);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 40%;
  transition: 1s ease-out;
}
.mm4b.inview {
  background-size: 100% 40%;
}
.mm5{
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #ffff66, #ffff66);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 20%;
  transition: 1s ease-out;
}
.mm5.inview {
  background-size: 100% 20%;
}
  .mm5b {
  display: inline;
  position: relative;
  background-image: linear-gradient(90deg, #7af0ff, #7af0ff);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0 20%;
  transition: 1s ease-out;
}
.mm5b.inview {
  background-size: 100% 20%;
}