2

Мне нужно сделать первую точку моего bubble chat периодически видимой и невидимой в цикле - infinit CSS3 animation.

введите сюда описание изображения

Почему мой код не работает?

@keyframes onoff {
  0% { display: none; }
  25% { display: block; }
  50% { display: none; }
  100% { display: block; }
}
#circle1 {
  animation: onoff 5s infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">
  <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
    <path d="M.5 16.5c0 .553.447 1 1 1h2v4l4-4h15c.552 0 1-.447 1-1v-13c0-.553-.448-1-1-1h-21c-.553 0-1 .447-1 1v13z" />


    <!--Annimation on this cicle-->

    <circle id="circle1" cx="8.5" cy="10" r=".5" />

    <!-- -->

    <circle id="circle2" cx="16.5" cy="10" r=".5" />
    <circle id="circle3 " cx="12.5" cy="10" r=".5" />
  </g>
</svg>

Перевод вопроса: SVG image CSS3 animation @Chloe

1

2 ответа 2

2

Пример на css

*{
  box-sizing: border-box;  
}

.bubble-chat{
  width: 240px;
  height: 100px;
  border: 10px solid #000;
  border-bottom: transparent;
  border-radius: 10px;
  position: relative;
  text-align: center;
}
.bubble-chat:before,
.bubble-chat:after{
  content: '';
  position: absolute; bottom: 0;
  height: 10px;
  background: #000;
}
.bubble-chat:before{
   left: 0;
   width: 20px;  
}
.bubble-chat:after{
  right: 0;
  width: 150px;  
}
.bubble-chat-arrow,
.bubble-chat-arrow:after{
  position: absolute;
  width: 10px;
  background: #000;
  border-radius: 0 0 10px 10px;
}
.bubble-chat-arrow{
  top: calc(100% - 10px); left: 20px; 
  height: 50px;    
}
.bubble-chat-arrow:after{
  content: '';
  bottom: -10px; right: -22px;  
  height: 68px;    
  transform: rotate(49deg);
}
.bubble-chat-circle,
.bubble-chat-circle:before,
.bubble-chat-circle:after{
  width: 20px;
  height: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
}
.bubble-chat-circle{
  top: 50%; left: 50%;
  margin: -10px 0 0 -10px;  
}
.bubble-chat-circle:before{
  content: ''; 
  left: -50px;
  animation: animChatOff 2s infinite;
}
.bubble-chat-circle:after{
  content: '';    
  right: -50px;
}
@keyframes animChatOff {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
<div class="bubble-chat">
  <span class="bubble-chat-arrow"></span>
  <span class="bubble-chat-circle"></span>  
</div>

2

Свойство display не является анимационным (см. MDN) Тем не менее, вы можете анимировать opacity

Пример:

@keyframes onoff {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
#circle1 {
  animation: onoff 2s infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 24 24">
  <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
    <path d="M.5 16.5c0 .553.447 1 1 1h2v4l4-4h15c.552 0 1-.447 1-1v-13c0-.553-.448-1-1-1h-21c-.553 0-1 .447-1 1v13z" />
    <circle id="circle1" cx="8.5" cy="10" r=".5" />
    <circle id="circle2" cx="16.5" cy="10" r=".5" />
    <circle id="circle3 " cx="12.5" cy="10" r=".5" />
  </g>
</svg>

Перевод ответа: SVG image CSS3 animation @web-tiki

Ваш ответ

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

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