Защо не се показва string4 и как да бъде оправено? CSS

Post Reply
User avatar
Ticketa
Потребител
Потребител
Reactions: 3
Posts: 627
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 24
Location: in /root
Contact:

Защо не се показва string4 и как да бъде оправено? CSS

Post by Ticketa »

https://codepen.io/Ticketa/pen/KKNaqZb

Code: Select all

<meta charset="UTF-8">
<style>.ms-header {
  display: flex;
  align-items: center;
  jsutify-content: center;
  font-family: sans-serif;
}
.ms-header__title {
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
  /*font-size: 4rem;*/
  font-weight: bold;
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;
  -webkit-mask-image: linear-gradient(transparent, white, white, white, transparent);
          mask-image: linear-gradient(transparent, white, white, white, transparent);
  mask-type: luminance;
  mask-mode: alpha;
}
.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-animation-name: wordSlider;
          animation-name: wordSlider;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}
@-webkit-keyframes wordSlider {
  0%,
  27% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  33%,
  60% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  66%,
  93% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  100% {
    -webkit-transform: translateY(-60% -80%);
            transform: translateY(-60% -80%);
  }
}

@keyframes wordSlider {
  0%,
  27% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  33%,
  60% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  66%,
  93% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  100% {
    -webkit-transform: translateY(-60% -80%);
            transform: translateY(-60% -80%);
  }
}</style><header class="ms-header">
  <h1 class="ms-header__title">
    Text
    <div class="ms-slider">
      <ul class="ms-slider__words">
        <li class="ms-slider__word">string1</li>
        <li class="ms-slider__word">string2</li>
        <li class="ms-slider__word">string3</li>
        <li class="ms-slider__word">string4</li>
        <!-- This last word needs to duplicate the first one to ensure a smooth infinite animation -->
        <li class="ms-slider__word">string1</li>
      </ul>
    </div>
  </h1>
</header>
User avatar
djman
Гуру
Гуру
Reactions: 0
Posts: 2833
Joined: Sat Sep 12, 2009 8:07 am
Answers: 111

Re: Защо не се показва string4 и как да бъде оправено? CSS

Post by djman »

Поиграй си с keyframes. Имаш 4 реда да покажеш, а в keyframes имаш само 3 стъпки.

Това показва string4, само транзишъна към string1 не е наред. Може да се направи за произволно количество редове с малко математика :)

Code: Select all

@keyframes wordSlider {
  0%,
  15% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25%,
  40% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  45%,
  60% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  65%,80% {
    transform: translateY(-60%);
  }
  100% {
    -webkit-transform: translateY(-60% -80%);
            transform: translateY(-60% -80%);
  }
}
User avatar
Ticketa
Потребител
Потребител
Reactions: 3
Posts: 627
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 24
Location: in /root
Contact:

Re: Защо не се показва string4 и как да бъде оправено? CSS

Post by Ticketa »

Нещо не сработва ?
User avatar
djman
Гуру
Гуру
Reactions: 0
Posts: 2833
Joined: Sat Sep 12, 2009 8:07 am
Answers: 111

Re: Защо не се показва string4 и как да бъде оправено? CSS

Post by djman »

Сработва: https://codesandbox.io/s/jovial-sun-h49 ... index.html
Не съм пипал -webkit keyframes
Post Reply