Ключевой кадр не показывает все элементы - PullRequest
Новая
       94

Ключевой кадр не показывает все элементы

3 голосов
/ 23 сентября 2019

У меня есть простой текстовый слайдер, который содержит 5 элементов, к сожалению, слайд показывает только три элемента.

Вот мой jsfiddle: live demo

Вотмой HTML пока. 

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
      <div class="content">
        <div class="slider-wrapper">
          I can write
          <div class="slider">
              <div class="slider-text1">HTML</div>
              <div class="slider-text2">Java</div>
              <div class="slider-text3">PHP</div>
              <div class="slider-text4">SOCIAL.</div>
              <div class="slider-text5">LOUD.</div>
          </div>
        </div>       
      </div>
    </body>

Вот мой CSS для анимации. 

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapper {
  font-size: 40px;
  color:#aaa;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 50px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 3s linear infinite;
}
.slider-text2 {
  background: skyblue;
}
.slider-text3 {
  background: lightcoral;
}
.slider-text4 {
  background: green;
}
.slider-text5 {
  background: orange;
}
@keyframes slide {
  0% {margin-top:-300px;}
  5% {margin-top:-200px;}
  33% {margin-top:-200px;}
  38% {margin-top:-100px;}
  66% {margin-top:-100px;}
  71% {margin-top:0px;}
  100% {margin-top:0px;}
}

Что мне нужно изменить в моем коде, чтобы все элементы отображались в моем слайдере?Любая помощь или предложения будут оценены.

Ответы [ 2 ]

1 голос
/ 24 сентября 2019 

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapper {
  font-size: 40px;
  color:#aaa;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 50px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 4s linear infinite;
}
.slider-text2 {
  background: skyblue;
}
.slider-text3 {
  background: lightcoral;
}
.slider-text4 {
  background: green;
}
.slider-text5 {
  background: orange;
}
@keyframes slide {
  0% {margin-top:-500px;}
  8% {margin-top:-500px;}
  16% {margin-top:-400px;}
  24% {margin-top:-400px;}
  32% {margin-top:-300px;}
  40% {margin-top:-300px;}
  48% {margin-top:-200px;}
  56% {margin-top:-200px;}
  64% {margin-top:-100px;}
  72% {margin-top:-100px;}
  80% {margin-top:0px;}
  88% {margin-top:0px;}
  
}
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
      <div class="content">
        <div class="slider-wrapper">
          I can write
          <div class="slider">
              <div class="slider-text1">HTML</div>
              <div class="slider-text2">CdfddfSS</div>
              <div class="slider-text3">PHP</div>
              <div class="slider-text4">SOCIAL.</div>
              <div class="slider-text5">LOUD.</div>
          </div>
        </div>       
      </div>
    </body>
0 голосов
/ 23 сентября 2019

Измените свой CSS-код, 

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-wrapper {
  font-size: 40px;
  color:#aaa;
  font-weight: bold;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider{
  height: 50px;
  padding-left:15px;
  overflow: hidden;
}
.slider div {
  color:#fff;
  height: 50px;
  margin-bottom: 50px;
  padding: 2px 15px;
  text-align: center;
  box-sizing: border-box;
}
.slider-text1 {
background: lightgreen;
animation: slide 3s linear infinite;
}
.slider-text2 {
  background: skyblue;
}
.slider-text4 {
  background: lightcoral;
}
.slider-text3 {
  background: green;
}
.slider-text5 {
  background: orange;
}
@keyframes slide {
  0% {margin-top:-500px;}
  20% {margin-top:-400px;}
  40% {margin-top:-300px;}
  60% {margin-top:-200px;}
  80% {margin-top:-100px;}
  100% {margin-top:0px;}
}
...