import * as React from 'react'; import styled, { keyframes } from 'styled-components'; export const AnimatedChatIcon = () => ( ); const scale = keyframes` 0% { transform: scale(1.2) } 15% { transform: scale(1) } 85% { transform: scale(1) } 100% { transform: scale(1.2) } `; const fadeInOut = keyframes` 0%, 30%, 50%, 100% { transform: initial; } 40% { transform: translateY(-5px); } `; const Bubble = styled.g` animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: 50% 50%; `; const Rays = styled.g` animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: 50% 50%; `; const Dot = styled.circle<{ delay: number }>` animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite; `;