I need to make the first point of my bubble chat periodically visible and invisible in the loop - infinit CSS3 animation .

enter image description here

Why is my code not working?

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

Translation question: SVG image CSS3 animation @Chloe

  • association: stackoverflow.com/questions/33128730/svg-image-css3-animation/… - Alexandr_TT
  • The question posed by a charming blonde is very simple, maybe it was not worth translating and posting it on ruSO. But, as it seems to me, the idea is interesting, easy to implement, even for beginners, and when introduced it will make a certain “animating” on the web pages. What is missing is the implementation options without SVG on pure CSS. Waiting for your options. - Alexandr_TT

2 answers 2

Css example

 *{ 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>

    The display property is not animated ( see MDN ). However, you can animate the opacity

    Example:

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

    Translation of the answer: SVG image CSS3 animation @ web-tiki