javascript - Circle looks jagged and not very smooth in Safari -
i created circle zooms in , fades out once reaches scale. when open on google chrome, edges of circle looks perfect , crisp. on safari, edge of circle looks bad , faded out. added "webkit" , still same. css animation not compatible safari? here code.
picture of how edges in chrome https://gyazo.com/91a2faecb48703c4ed7e47bc3035b802
picture of how edges in safari https://gyazo.com/0507f9bb35eb2e0fd21b620d3ba44538
html
<ul id="bubbles"> <li id="firstcircle"></li> </ul> css
#bubbles li{ position: relative; list-style: none; display: block; border-radius: 100%; animation: fadeandscale 15s ease-in infinite; -webkit-animation: fadeandscale 15s ease-in infinite; -ms-animation: fadeandscale 15s ease-in infinite; -moz-animation: fadeandscale 15s ease-in infinite; -o-animation: fadeandscale 15s ease-in infinite; } #bubbles li:nth-child(1){ width: 100px; height: 100px; background-color: red; } @keyframes fadeandscale{ 0%{ z-index: 100; transform: scale(0) } 100%{ z-index: 0; transform: scale(50); } } @-webkit-keyframes fadeandscale{ 0%{ z-index: 100; -webkit-transform: scale(0) } 100%{ z-index: 0; -webkit-transform: scale(50); } }
i use round dot svg image , proceed use css animate scaling.
edit: how site approaching it...
.indiez-fow-bg-wrapper { background: -webkit-linear-gradient(45deg, #1c96ff 0%, #00ffc9 100%); background: linear-gradient(45deg, #1c96ff 0%, #00ffc9 100%); width: 100%; height: 100%; margin: 0 auto; overflow: hidden; margin-top: 0; top: 0; left: 0; position: absolute; } @media (max-width: 600px) {} .indiez-fow-bg-wrapper>div { will-change: transform; width: 800px; height: 800px; position: absolute; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); margin-top: -250px; margin-left: -250px; } .indiez-fow-bg-wrapper>div:not(._touch) { border-radius: 50%; } @media (max-width: 600px) { .indiez-fow-bg-wrapper>div { width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; } } .indiez-fow-bg-wrapper._animate .__violet { left: 25%; top: 15%; } .indiez-fow-bg-wrapper._animate .__violet._touch { left: auto; right: -10%; top: 5%; -webkit-animation: scaleup 16s linear forwards; animation: scaleup 16s linear forwards; } .indiez-fow-bg-wrapper._animate .__violet:not(._touch) { background: -webkit-linear-gradient(45deg, #411afa 4%, #9400ff 74%); background: linear-gradient(45deg, #411afa 4%, #9400ff 74%); -webkit-animation: scaleup 20s linear forwards; animation: scaleup 20s linear forwards; } .indiez-fow-bg-wrapper._animate .__red { top: 25%; right: 5%; -webkit-animation: scaleup 20s 4.5s linear forwards; animation: scaleup 20s 4.5s linear forwards; } .indiez-fow-bg-wrapper._animate .__red:not(._touch) { background: -webkit-linear-gradient(45deg, #f14545 0%, #e7219b 100%); background: linear-gradient(45deg, #f14545 0%, #e7219b 100%); } .indiez-fow-bg-wrapper._animate .__red._touch { right: auto; left: 25%; top: 30%; -webkit-animation: scaleup 16s 3s linear forwards; animation: scaleup 16s 3s linear forwards; } .indiez-fow-bg-wrapper._animate .__mint { top: 200px; left: 20%; -webkit-animation: scaleup 20s 9s linear forwards; animation: scaleup 20s 9s linear forwards; } .indiez-fow-bg-wrapper._animate .__mint:not(._touch) { background: -webkit-linear-gradient(45deg, #01c961 0%, #00ffa2 100%); background: linear-gradient(45deg, #01c961 0%, #00ffa2 100%); } .indiez-fow-bg-wrapper._animate .__mint._touch { -webkit-animation: scaleup 16s 6s linear forwards; animation: scaleup 16s 6s linear forwards; } .indiez-fow-bg-wrapper._animate .__sunflower { bottom: 0px; right: 100px; -webkit-animation: scaleup 20s 13.5s linear forwards; animation: scaleup 20s 13.5s linear forwards; } .indiez-fow-bg-wrapper._animate .__sunflower:not(._touch) { background: -webkit-linear-gradient(45deg, #ffb100 0%, #ffe938 100%); background: linear-gradient(45deg, #ffb100 0%, #ffe938 100%); } .indiez-fow-bg-wrapper._animate .__sunflower._touch { -webkit-animation: scaleup 16s 9s linear forwards; animation: scaleup 16s 9s linear forwards; } .indiez-fow-bg-wrapper._animate .__purple { top: 300px; left: 10%; -webkit-animation: scaleup 20s 18s linear forwards; animation: scaleup 20s 18s linear forwards; } .indiez-fow-bg-wrapper._animate .__purple:not(._touch) { background: -webkit-linear-gradient(45deg, #ff519f 0%, #be42ff 100%); background: linear-gradient(45deg, #ff519f 0%, #be42ff 100%); } .indiez-fow-bg-wrapper._animate .__purple._touch { -webkit-animation: scaleup 16s 12s linear forwards; animation: scaleup 16s 12s linear forwards; } .indiez-fow-bg-wrapper._animate .__royal-blue { top: 10%; right: 10%; -webkit-animation: scaleup 20s 22.5s linear forwards; animation: scaleup 20s 22.5s linear forwards; } .indiez-fow-bg-wrapper._animate .__royal-blue:not(._touch) { background: -webkit-linear-gradient(45deg, #2500da 0%, #009bff 100%); background: linear-gradient(45deg, #2500da 0%, #009bff 100%); } .indiez-fow-bg-wrapper._animate .__royal-blue._touch { -webkit-animation: scaleup 16s 15s linear forwards; animation: scaleup 16s 15s linear forwards; } .indiez-fow-bg-wrapper._animate .__orange { bottom: 0; left: 100px; -webkit-animation: scaleup 20s 27s linear forwards; animation: scaleup 20s 27s linear forwards; } .indiez-fow-bg-wrapper._animate .__orange:not(._touch) { background: -webkit-linear-gradient(45deg, #ff4040 0%, #ff9a3d 100%); background: linear-gradient(45deg, #ff4040 0%, #ff9a3d 100%); } .indiez-fow-bg-wrapper._animate .__orange._touch { -webkit-animation: scaleup 16s 18s linear forwards; animation: scaleup 16s 18s linear forwards; } .indiez-fow-bg-wrapper._animate .__lime { top: 25%; right: 200px; -webkit-animation: scaleup 20s 31.5s linear forwards; animation: scaleup 20s 31.5s linear forwards; } .indiez-fow-bg-wrapper._animate .__lime:not(._touch) { background: -webkit-linear-gradient(45deg, #79e200 0%, #b2951b 100%); background: linear-gradient(45deg, #79e200 0%, #b2951b 100%); } .indiez-fow-bg-wrapper._animate .__lime._touch { -webkit-animation: scaleup 16s 21s linear forwards; animation: scaleup 16s 21s linear forwards; } .indiez-fow-bg-wrapper._animate .__aqua { top: 25%; left: 15%; -webkit-animation: scaleup 20s 36s linear forwards; animation: scaleup 20s 36s linear forwards; } .indiez-fow-bg-wrapper._animate .__aqua:not(._touch) { background: -webkit-linear-gradient(45deg, #1c96ff 0%, #00ffc9 100%); background: linear-gradient(45deg, #1c96ff 0%, #00ffc9 100%); } .indiez-fow-bg-wrapper._animate .__aqua._touch { -webkit-animation: scaleup 16s 12s linear forwards; animation: scaleup 16s 12s linear forwards; } @-webkit-keyframes scaleup { 60% { -webkit-transform: scale(5); transform: scale(5); } 100% { -webkit-transform: scale(0); transform: scale(0); } } @keyframes scaleup { 60% { -webkit-transform: scale(5); transform: scale(5); } 100% { -webkit-transform: scale(0); transform: scale(0); } }<div class="indiez-fow-bg-wrapper _animate"> <div class="__violet "> </div> <div class="__red "> </div> <div class="__mint "> </div> <div class="__sunflower "> </div> <div class="__purple "> </div> <div class="__royal-blue "> </div> <div class="__orange "> </div> <div class="__lime "> </div> <div class="__aqua "> </div> </div>
Comments
Post a Comment