1

всем доброго времен суток. Есть виджет, вот код https://jsfiddle.net/253frmxd/16/ , проблема в том что когда там картинка + текст, то переход заново начинается не плавно, а как-то резко(прыгая), а хотелось бы чтобы плавно шло друг за другом.
Если поставить вместо картинки текст, то все переходы плавные.
Может кто-нибудь знает в чем я ошибся?

.chat-widget {
  position: fixed;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  transition: all 0.4s ease 0s;
  z-index: 20;
}

.chat-widget__body {
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #161616;
  box-shadow: 0px 0px 4px #161616;
  transition: all 0.4s ease 0s;
}

.chat-widget__line-holder {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: #161616;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.chat-widget__icons {
  text-align: center;
  display: flex;
  position: absolute;
  animation: icon-change 2.5s linear infinite;
  transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
  animation-delay: 0;
}

.chat-widget__icon {
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 30%);
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
}

.chat-widget__icon img {
  width: 18px;
  height: 22px;
  object-fit: cover;
}

.chat-widget__pulsation {
  width: 84px;
  height: 84px;
  background: rgba(204, 186, 150);
  border-radius: 50%;
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: -1;
  transform: scale(0);
  animation: pulse 2s infinite;
}

.chat-widget__pulsation:nth-of-type(2n) {
  animation-delay: 0.5s;
}

@keyframes icon-change {
  0%,
  15% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(-60px);
  }
}

@media (max-width: 480px) {
  @keyframes icon-change {
    0%,
    15% {
      transform: translateX(0);
    }
    80%,
    100% {
      transform: translateX(-43px);
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.chat-widget-text {
  position: fixed;
  top: 10px;
  left: 95px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  transition: all 0.4s ease 0s;
  z-index: 20;
}

.chat-widget__body-text {
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #161616;
  box-shadow: 0px 0px 4px #161616;
  transition: all 0.4s ease 0s;
}

.chat-widget__line-holder-text {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: #161616;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.chat-widget__icons-text {
  text-align: center;
  display: flex;
  position: absolute;
  animation: icon-change-text 2.5s linear infinite;
  transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
  animation-delay: 0;
}

.chat-widget__icon-text {
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 30%);
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
}

.chat-widget__icon-text img {
  width: 18px;
  height: 22px;
  object-fit: cover;
}

.chat-widget__pulsation-text {
  width: 84px;
  height: 84px;
  background: rgba(204, 186, 150);
  border-radius: 50%;
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: -1;
  transform: scale(0);
  animation: pulse-text 2s infinite;
}

.chat-widget__pulsation-text:nth-of-type(2n) {
  animation-delay: 0.5s;
}

@keyframes icon-change-text {
  0%,
  15% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(-60px);
  }
}

@media (max-width: 480px) {
  @keyframes icon-change-text {
    0%,
    15% {
      transform: translateX(0);
    }
    80%,
    100% {
      transform: translateX(-43px);
    }
  }
}

@keyframes pulse-text {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
<div class="chat-widget">
  <div class="chat-widget__body">
    <div class="chat-widget__line-holder">
      <div class="chat-widget__icons">
        <div class="chat-widget__icon"><img src="data:image/jpeg;base64,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"
            alt=""></div>
        <div class="chat-widget__icon">Текст текст
        </div>
      </div>
    </div>
  </div>
  <div class="chat-widget__pulsation"></div>
  <div class="chat-widget__pulsation"></div>
</div>

<div class="chat-widget-text">
  <div class="chat-widget__body-text">
    <div class="chat-widget__line-holder-text">
      <div class="chat-widget__icons-text">
        <div class="chat-widget__icon-text">Текст текст</div>
        <div class="chat-widget__icon-text">Текст текст
        </div>
      </div>
    </div>
  </div>
  <div class="chat-widget__pulsation-text"></div>
  <div class="chat-widget__pulsation-text"></div>
</div>

3
  • с текстом вроде бы точно такой же скачок. Можешь добавить в пример реализацию с текстом, чтобы была видна разница?
    – Grundy
    3 фев 2022 в 22:01
  • добавил, нужно как с текстом оно перемещается
    – tiptop88
    3 фев 2022 в 22:09
  • куда добавил? Чтобы отредактировать вопрос используй кнопку править под вопросом
    – Grundy
    3 фев 2022 в 22:10

1 ответ 1

4

На самом деле работает одинаково. Чтобы увидеть это, достаточно использовать разные тексты:

.chat-widget {
  position: fixed;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  transition: all 0.4s ease 0s;
  z-index: 20;
}

.chat-widget__body {
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #161616;
  box-shadow: 0px 0px 4px #161616;
  transition: all 0.4s ease 0s;
}

.chat-widget__line-holder {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: #161616;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.chat-widget__icons {
  text-align: center;
  display: flex;
  position: absolute;
  animation: icon-change 2.5s linear infinite;
  transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
  animation-delay: 0;
}

.chat-widget__icon {
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 30%);
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
}

.chat-widget__icon img {
  width: 18px;
  height: 22px;
  object-fit: cover;
}

.chat-widget__pulsation {
  width: 84px;
  height: 84px;
  background: rgba(204, 186, 150);
  border-radius: 50%;
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: -1;
  transform: scale(0);
  animation: pulse 2s infinite;
}

.chat-widget__pulsation:nth-of-type(2n) {
  animation-delay: 0.5s;
}

@keyframes icon-change {
  0%,
  15% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(-60px);
  }
}

@media (max-width: 480px) {
  @keyframes icon-change {
    0%,
    15% {
      transform: translateX(0);
    }
    80%,
    100% {
      transform: translateX(-43px);
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.chat-widget-text {
  position: fixed;
  top: 10px;
  left: 95px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  transition: all 0.4s ease 0s;
  z-index: 20;
}

.chat-widget__body-text {
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #161616;
  box-shadow: 0px 0px 4px #161616;
  transition: all 0.4s ease 0s;
}

.chat-widget__line-holder-text {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: #161616;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.chat-widget__icons-text {
  text-align: center;
  display: flex;
  position: absolute;
  animation: icon-change-text 2.5s linear infinite;
  transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
  animation-delay: 0;
}

.chat-widget__icon-text {
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 30%);
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
}

.chat-widget__icon-text img {
  width: 18px;
  height: 22px;
  object-fit: cover;
}

.chat-widget__pulsation-text {
  width: 84px;
  height: 84px;
  background: rgba(204, 186, 150);
  border-radius: 50%;
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: -1;
  transform: scale(0);
  animation: pulse-text 2s infinite;
}

.chat-widget__pulsation-text:nth-of-type(2n) {
  animation-delay: 0.5s;
}

@keyframes icon-change-text {
  0%,
  15% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(-60px);
  }
}

@media (max-width: 480px) {
  @keyframes icon-change-text {
    0%,
    15% {
      transform: translateX(0);
    }
    80%,
    100% {
      transform: translateX(-43px);
    }
  }
}

@keyframes pulse-text {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
<div class="chat-widget">
  <div class="chat-widget__body">
    <div class="chat-widget__line-holder">
      <div class="chat-widget__icons">
        <div class="chat-widget__icon"><img src="data:image/jpeg;base64,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"
            alt=""></div>
        <div class="chat-widget__icon">Текст текст
        </div>
      </div>
    </div>
  </div>
  <div class="chat-widget__pulsation"></div>
  <div class="chat-widget__pulsation"></div>
</div>

<div class="chat-widget-text">
  <div class="chat-widget__body-text">
    <div class="chat-widget__line-holder-text">
      <div class="chat-widget__icons-text">
        <div class="chat-widget__icon-text">Текст текст 2</div>
        <div class="chat-widget__icon-text">Текст текст
        </div>
      </div>
    </div>
  </div>
  <div class="chat-widget__pulsation-text"></div>
  <div class="chat-widget__pulsation-text"></div>
</div>


Для решения нужно:

  1. сделать три точки вместо двух
  2. первый и последний элементы должны быть одинаковыми
  3. в анимации разбить интервал на 3 части

Пример:

.chat-widget {
  position: fixed;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  transition: all 0.4s ease 0s;
  z-index: 20;
}

.chat-widget__body {
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #161616;
  box-shadow: 0px 0px 4px #161616;
  transition: all 0.4s ease 0s;
}

.chat-widget__line-holder {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: #161616;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.chat-widget__icons {
  text-align: center;
  display: flex;
  position: absolute;
  animation: icon-change 3.25s linear infinite;
  transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
  animation-delay: 0;
}

.chat-widget__icon {
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 30%);
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
}

.chat-widget__icon img {
  width: 18px;
  height: 22px;
  object-fit: cover;
}

.chat-widget__pulsation {
  width: 84px;
  height: 84px;
  background: rgba(204, 186, 150);
  border-radius: 50%;
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: -1;
  transform: scale(0);
  animation: pulse 2s infinite;
}

.chat-widget__pulsation:nth-of-type(2n) {
  animation-delay: 0.5s;
}

@keyframes icon-change {
  0%,
  15% {
    transform: translateX(0);
  }
  50%,
  65% {
    transform: translateX(-60px);
  }
  100% {
    transform: translateX(-120px);
  }
}

@media (max-width: 480px) {
  @keyframes icon-change {
    0%,
    15% {
      transform: translateX(0);
    }
    80%,
    100% {
      transform: translateX(-43px);
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.chat-widget-text {
  position: fixed;
  top: 10px;
  left: 95px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  padding: 5px;
  transition: all 0.4s ease 0s;
  z-index: 20;
}

.chat-widget__body-text {
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background: #161616;
  box-shadow: 0px 0px 4px #161616;
  transition: all 0.4s ease 0s;
}

.chat-widget__line-holder-text {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  background: #161616;
  border-radius: 50%;
  opacity: 1;
  transition: opacity 0.4s;
  z-index: 2;
}

.chat-widget__icons-text {
  text-align: center;
  display: flex;
  position: absolute;
  animation: icon-change-text 2.5s linear infinite;
  transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
  animation-delay: 0;
}

.chat-widget__icon-text {
  border-radius: 50%;
  box-shadow: 0 6px 16px 0 rgb(0 0 0 / 30%);
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #ffffff;
}

.chat-widget__icon-text img {
  width: 18px;
  height: 22px;
  object-fit: cover;
}

.chat-widget__pulsation-text {
  width: 84px;
  height: 84px;
  background: rgba(204, 186, 150);
  border-radius: 50%;
  position: absolute;
  left: -7px;
  top: -7px;
  z-index: -1;
  transform: scale(0);
  animation: pulse-text 2s infinite;
}

.chat-widget__pulsation-text:nth-of-type(2n) {
  animation-delay: 0.5s;
}

@keyframes icon-change-text {
  0%,
  15% {
    transform: translateX(0);
  }
  80%,
  100% {
    transform: translateX(-60px);
  }
}

@media (max-width: 480px) {
  @keyframes icon-change-text {
    0%,
    15% {
      transform: translateX(0);
    }
    80%,
    100% {
      transform: translateX(-43px);
    }
  }
}

@keyframes pulse-text {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
<div class="chat-widget">
  <div class="chat-widget__body">
    <div class="chat-widget__line-holder">
      <div class="chat-widget__icons">
        <div class="chat-widget__icon"><img src="data:image/jpeg;base64,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"
            alt=""></div>
        <div class="chat-widget__icon">Текст текст
        </div>
        <div class="chat-widget__icon"><img src="data:image/jpeg;base64,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"
            alt=""></div>
      </div>
    </div>
  </div>
  <div class="chat-widget__pulsation"></div>
  <div class="chat-widget__pulsation"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.