CSS3-анимация SVG-изображения

262

12 апреля 2017, 13:46

Мне нужно сделать первую точку моего 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

Answer 1

Пример на 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>

Answer 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>