Related
I have an SVG with animated eyes on my website. The eyes have a blink animation made with transform: scale(). When I now open Chrome and the eyes blink the path of the eyes sometimes gets blurred. It often happens when I scale the website to 90%, but it is not consistent. I also tried adding translateZ(0) and backface-visibility: hidden; but nothing helped.
Can I solve this somehow?
Since it doesn't happen consistently I don't know if this Snippet will show my problem. As an alternative, I made a JSFiddle: https://jsfiddle.net/qnwj8uLm/
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform: scale(1) translateZ(0);
transform-origin: 0% 75%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes info-eyes {
0% {transform:scale(1, 1) translateZ(0); }
96% {transform:scale(1, 1) translateZ(0); }
98% {transform:scale(1, 0.1) translateZ(0); }
100% {transform:scale(1, 1) translateZ(0); }
}
#keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>
The problem likely stems from browser optimization. There are some possible solutions, like will-change: transform, but in my browser it does not work in your example. A hackish way to force the browser to redraw is to add a transform: translateZ(0) right after scaling that is messing the figure:
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform: scale(1) translateZ(0);
transform-origin: 0% 75%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes info-eyes {
0% {transform:scale(1, 1) translateZ(0); }
96% {transform:scale(1, 1) translateZ(0); }
98% {transform:scale(1, 0.1) translateZ(0); }
98.001% {transform: translateZ(0); }
100% {transform:scale(1, 1) translateZ(0); }
}
#keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>
I found a solution to my problem. I changed the blink-keyframe from transform:scale(1, 0.1) to transform:scale(1, 0.2) and now the animation works fine.
Snippet:
.info-eyes {
animation-name: info-eyes;
animation-duration: 6s;
animation-iteration-count: infinite;
transform-origin: 0% 75%;
}
.info-iris {
animation-name: info-iris;
animation-duration: 6s;
animation-iteration-count: infinite;
}
#keyframes info-eyes {
0% {transform:scale(1, 1) }
96% {transform:scale(1, 1) }
98% {transform:scale(1, 0.2) }
100% {transform:scale(1, 1) }
}
#keyframes info-iris {
0% {transform: translate(0%, 0%); opacity: 100%;; }
25% {transform: translate(0%, 8%); opacity: 100%;}
50% {transform: translate(8%, 8%); opacity: 100%;}
75% {transform: translate(8%, 8%); opacity: 100%;}
96% {transform: translate(0%, 0%); opacity: 100%;}
98% {transform: translate(0%, 0%); opacity: 0%;}
100% {transform: translate(0%, 0%); opacity: 100%;}
}
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="81.7" height="75.3" viewBox="0 0 81.7 75.3">
<defs>
<style>
.a {
fill: none;
}
.b {
clip-path: url(#a);
}
.h {
fill: #fff;
}
</style>
<clipPath id="a">
<rect class="a" width="81.7" height="75.3" />
</clipPath>
</defs>
<g transform="translate(40.85 37.65)">
<g class="b" transform="translate(-40.85 -37.65)">
<path class="info-eyes" d="M34.8,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="info-eyes" d="M60.7,52.7a7,7,0,1,1-7-7,7,7,0,0,1,7,7" />
<path class="h info-iris" d="M25.9,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
<path class="h info-iris" d="M51.6,50.6c0-2-2.5-2.4-2.5,0s2.5,2,2.5,0" />
</g>
</g>
</svg>
</body>
I am trying to figure out why this animation on codepen doesn't work
https://codepen.io/cassie-codes/full/zWJxXj/
in which you can find a bubble animation with 2 images. One is a background, the second one is a mask. these random bubbles should move and reveal the mask image. On chrome works, on firefox not. I can't understand if the problem is about the svg properties or something on css. Anyway that's the code
Html:
<div class="bgImage"></div>
<svg class="blobCont">
<image xlink:href="https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
<mask id="mask" x="0" y="0">
<g style="filter: url(#gooey)">
<circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="50%" cy="10%" r="40" fill="white" stroke="white"/>
<circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
<circle class="blob" cx="90%" cy="20%" r="120" fill="white" stroke="white"/>
<circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
<circle class="blob" cx="50%" cy="60%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="70%" cy="90%" r="10" fill="white" stroke="white"/>
<circle class="blob" cx="90%" cy="60%" r="90" fill="white" stroke="white"/>
<circle class="blob" cx="30%" cy="90%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="10%" cy="10%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="50%" cy="10%" r="20" fill="white" stroke="white"/>
<circle class="blob" cx="17%" cy="15%" r="70" fill="white" stroke="white"/>
<circle class="blob" cx="40%" cy="20%" r="120" fill="white" stroke="white"/>
<circle class="blob" cx="30%" cy="25%" r="30" fill="white" stroke="white"/>
<circle class="blob" cx="80%" cy="60%" r="80" fill="white" stroke="white"/>
<circle class="blob" cx="17%" cy="10%" r="100" fill="white" stroke="white"/>
<circle class="blob" cx="40%" cy="60%" r="90" fill="white" stroke="white"/>
<circle class="blob" cx="10%" cy="50%" r="80" fill="white" stroke="white"/>
</g>
</mask>
<filter id="gooey" height="130%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
</filter>
</svg>
scss:
body , .bgImage {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.bgImage {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
background-size: cover;
background-position: top;
-webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
filter: grayscale(70%);
z-index: -1;
}
.blobCont {
position: absolute;
width: 100vw;
height: 100vh;
}
#for $i from 1 through 18 {
$a : #{$i*90};
$b : #{$i*90+360};
.blob:nth-child(#{$i}) {
animation: move#{$i} 20s infinite linear;
}
#keyframes move#{$i} {
from {
transform:rotate(#{$a}deg) translate( 200px ,0.1px) rotate(-#{$a}deg);
}
to {
transform:rotate(#{$b}deg) translate( 200px ,0.1px) rotate(-#{$b}deg);
}
}
}
and if needs, css compiled from scss
body, .bgImage {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.bgImage {
position: absolute;
background-image: url(https://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?ixlib=rb-0.3.5&s=e20bc3d490c974d9ea190e05c47962f5&auto=format&fit=crop&w=634&q=80);
background-size: cover;
background-position: top;
-webkit-filter: grayscale(70%);
/* Safari 6.0 - 9.0 */
filter: grayscale(70%);
z-index: -1;
}
.blobCont {
position: absolute;
width: 100vw;
height: 100vh;
}
.blob:nth-child(1) {
animation: move1 20s infinite linear;
}
#keyframes move1 {
from {
transform: rotate(90deg) translate(200px, 0.1px) rotate(-90deg);
}
to {
transform: rotate(450deg) translate(200px, 0.1px) rotate(-450deg);
}
}
.blob:nth-child(2) {
animation: move2 20s infinite linear;
}
#keyframes move2 {
from {
transform: rotate(180deg) translate(200px, 0.1px) rotate(-180deg);
}
to {
transform: rotate(540deg) translate(200px, 0.1px) rotate(-540deg);
}
}
.blob:nth-child(3) {
animation: move3 20s infinite linear;
}
#keyframes move3 {
from {
transform: rotate(270deg) translate(200px, 0.1px) rotate(-270deg);
}
to {
transform: rotate(630deg) translate(200px, 0.1px) rotate(-630deg);
}
}
.blob:nth-child(4) {
animation: move4 20s infinite linear;
}
#keyframes move4 {
from {
transform: rotate(360deg) translate(200px, 0.1px) rotate(-360deg);
}
to {
transform: rotate(720deg) translate(200px, 0.1px) rotate(-720deg);
}
}
.blob:nth-child(5) {
animation: move5 20s infinite linear;
}
#keyframes move5 {
from {
transform: rotate(450deg) translate(200px, 0.1px) rotate(-450deg);
}
to {
transform: rotate(810deg) translate(200px, 0.1px) rotate(-810deg);
}
}
.blob:nth-child(6) {
animation: move6 20s infinite linear;
}
#keyframes move6 {
from {
transform: rotate(540deg) translate(200px, 0.1px) rotate(-540deg);
}
to {
transform: rotate(900deg) translate(200px, 0.1px) rotate(-900deg);
}
}
.blob:nth-child(7) {
animation: move7 20s infinite linear;
}
#keyframes move7 {
from {
transform: rotate(630deg) translate(200px, 0.1px) rotate(-630deg);
}
to {
transform: rotate(990deg) translate(200px, 0.1px) rotate(-990deg);
}
}
.blob:nth-child(8) {
animation: move8 20s infinite linear;
}
#keyframes move8 {
from {
transform: rotate(720deg) translate(200px, 0.1px) rotate(-720deg);
}
to {
transform: rotate(1080deg) translate(200px, 0.1px) rotate(-1080deg);
}
}
.blob:nth-child(9) {
animation: move9 20s infinite linear;
}
#keyframes move9 {
from {
transform: rotate(810deg) translate(200px, 0.1px) rotate(-810deg);
}
to {
transform: rotate(1170deg) translate(200px, 0.1px) rotate(-1170deg);
}
}
.blob:nth-child(10) {
animation: move10 20s infinite linear;
}
#keyframes move10 {
from {
transform: rotate(900deg) translate(200px, 0.1px) rotate(-900deg);
}
to {
transform: rotate(1260deg) translate(200px, 0.1px) rotate(-1260deg);
}
}
.blob:nth-child(11) {
animation: move11 20s infinite linear;
}
#keyframes move11 {
from {
transform: rotate(990deg) translate(200px, 0.1px) rotate(-990deg);
}
to {
transform: rotate(1350deg) translate(200px, 0.1px) rotate(-1350deg);
}
}
.blob:nth-child(12) {
animation: move12 20s infinite linear;
}
#keyframes move12 {
from {
transform: rotate(1080deg) translate(200px, 0.1px) rotate(-1080deg);
}
to {
transform: rotate(1440deg) translate(200px, 0.1px) rotate(-1440deg);
}
}
.blob:nth-child(13) {
animation: move13 20s infinite linear;
}
#keyframes move13 {
from {
transform: rotate(1170deg) translate(200px, 0.1px) rotate(-1170deg);
}
to {
transform: rotate(1530deg) translate(200px, 0.1px) rotate(-1530deg);
}
}
.blob:nth-child(14) {
animation: move14 20s infinite linear;
}
#keyframes move14 {
from {
transform: rotate(1260deg) translate(200px, 0.1px) rotate(-1260deg);
}
to {
transform: rotate(1620deg) translate(200px, 0.1px) rotate(-1620deg);
}
}
.blob:nth-child(15) {
animation: move15 20s infinite linear;
}
#keyframes move15 {
from {
transform: rotate(1350deg) translate(200px, 0.1px) rotate(-1350deg);
}
to {
transform: rotate(1710deg) translate(200px, 0.1px) rotate(-1710deg);
}
}
.blob:nth-child(16) {
animation: move16 20s infinite linear;
}
#keyframes move16 {
from {
transform: rotate(1440deg) translate(200px, 0.1px) rotate(-1440deg);
}
to {
transform: rotate(1800deg) translate(200px, 0.1px) rotate(-1800deg);
}
}
.blob:nth-child(17) {
animation: move17 20s infinite linear;
}
#keyframes move17 {
from {
transform: rotate(1530deg) translate(200px, 0.1px) rotate(-1530deg);
}
to {
transform: rotate(1890deg) translate(200px, 0.1px) rotate(-1890deg);
}
}
.blob:nth-child(18) {
animation: move18 20s infinite linear;
}
#keyframes move18 {
from {
transform: rotate(1620deg) translate(200px, 0.1px) rotate(-1620deg);
}
to {
transform: rotate(1980deg) translate(200px, 0.1px) rotate(-1980deg);
}
}
When I say that it doesn't work, I mean that the bubbles do not move. The animation doesn't work on firefox. But on chrome yes.
From mozilla's developer page regarding CSS transform:
Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block.
Link: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
I'm trying to get a simple CSS3 animation on a SVG. Till now it works fine in Firefox and Chrome but not on Safari.
I added #-webkit-keyframes so it should work, but it doesn't.
I just started to code, so I may have gone wrong everywhere but I really need help!
#EYEBROW2 {
-webkit-animation: MoveEyebrow2 3s linear 2.2s 1 both;
-webkit-transform-origin: 57% 10%;
animation: MoveEyebrow2 3s linear 2.2s 1 both;
transform-origin: 57% 10%;
}
#-webkit-keyframes MoveEyebrow2 {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5.5px) rotate(4deg);
}
50% {
transform: translateY(5.5px) rotate(4deg);
}
75% {
transform: translateY(5.5px) rotate(4deg);
}
100% {
transform: translateY(0px);
}
}
#keyframes MoveEyebrow2 {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(5.5px) rotate(4deg);
}
50% {
transform: translateY(5.5px) rotate(4deg);
}
75% {
transform: translateY(5.5px) rotate(4deg);
}
100% {
transform: translateY(0px);
}
}
<div>
<svg width="500" height="100">
<g id="EYEBROW2"> <g> <path class="st9" d="M415.4,26.1l-8.6-0.5C406.3,21.8,415.6,26.2,415.4,26.1z" stroke="black" fill="black"/> </g> </g>
</svg>
</div>
But if I try to run the animations everything goes wrong! It's like it doesn't recognize the transform-origin point.
Can anyone help me?
I am toying with SVGs and how it works. I am trying to animate this SVG, where the envelope closes and flies off to the right, then a check mark appears.
So far, i have done the envelope SVG, i have managed to get the top to flip down, but it is above the envelope, i need it to close the envelope. It is also flipping in the wrong direction..
How do i fix this?
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st3{
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flipX 1.6s forwards;
}
#-webkit-keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
#keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
.flipX{
opacity:0;
-webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g id="Layer_1">
<rect id="XMLID_42_" class="st0" width="805" height="314"/>
</g>
<g id="Layer_2">
<rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/>
<g id="Layer_3">
<polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 "/>
<polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 "/>
</g>
</g>
</svg>
If you don't want something to move during a rotation, put it at the origin.
A quick fix in this case is to change the coordinates of the flap element so that the long edge has a y-coordinate of zero, then wrap the element in a <g> element with a transform attribute to place it where it's supposed to go.
Get rid of the transform-origin style too.
This works, but could be cleaned up a lot:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st3{
animation: flipX 1.6s forwards;
}
#-webkit-keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
#keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
}
}
.flipX{
opacity:0;
-webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g>
<rect class="st0" width="805" height="314"/>
</g>
<g>
<rect x="55" y="129" class="st1" width="192" height="98"/>
<g>
<polyline class="st2" points="55,129 151,178 247,129 "/>
<g transform="translate(0 129)">
<polyline class="st3" points="55,0 151,-65 247,0 "/>
</g>
</g>
</g>
</svg>
If you add translateY(-65px) to the 100% keyframe, it moves the envelope flap down as it's flipping it. 65px is an eyeball figure.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 805 314" style="enable-background:new 0 0 805 314;" xml:space="preserve">
<style type="text/css">
.st0{fill:#3B97D3;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#F1F2F2;stroke:#000000;stroke-miterlimit:10;}
.st2{fill:#E6E7E8;stroke:#000000;stroke-miterlimit:10;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st3{
transform-origin:55% 50%;
-moz-transform-origin:55% 50%;
animation: flipX 1.6s forwards;
}
#-webkit-keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1) translateY(-65px);
}
}
#keyframes flipX {
0% {
opacity:0;
-webkit-transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
transform: perspective(400px) translateZ(0) rotateX(0) scale(1);
}
100% {
opacity:1;
-webkit-transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1);
transform: perspective(400px) translateZ(0) rotateX(180deg) scale(1) translateY(-65px);
}
}
.flipX{
opacity:0;
-webkit-animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
animation: flipX 2s cubic-bezier(0.2, 0.3, 0.25, 0.9) forwards;
}
</style>
<g id="Layer_1">
<rect id="XMLID_42_" class="st0" width="805" height="314"/>
</g>
<g id="Layer_2">
<rect id="XMLID_1_" x="55" y="129" class="st1" width="192" height="98"/>
<g id="Layer_3">
<polyline id="XMLID_43_" class="st2" points="55,129 151,178 247,129 "/>
<polyline id="XMLID_3_" class="st3" points="55,129 151,64 247,129 "/>
</g>
</svg>
As you will see from the code below I have a lovely circular progress bar however I have a few questions and a little lost on how to achieve this (ideally I don't want to use any JS)
I want to make the pink bar that goes around be curved and not
flat, is this possible? like the edge of it. So instead of it being
| it would be a little like ) at the start and end.
The throbbing circle in the middle, is it possible for it to pause
for like 1 second once animation is complete before it starts
again?
/* Load Progress Animation */
#-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
#keyframes load {
0% {
stroke-dashoffset: 0
}
}
/* Qik Progress Container */
.progress {
position: relative;
display: inline-block;
padding: 0;
text-align: center;
}
/* Item SVG */
.progress svg {
width: 4rem;
height: 4rem;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: rgba(60, 99, 121, 0.9);
-webkit-animation: load 8s;
-moz-animation: load 8s;
-o-animation: load 8s;
animation: load 8s;
}
.pulse {
border-radius: 50%;
width: 18px;
height: 18px;
background: #ff1251;
position: absolute;
top: 1.45rem;
left: 1.45rem;
-webkit-animation: pulse 0.6s linear infinite;
-moz-animation: pulse 0.6s linear infinite;
-ms-animation: pulse 0.6s linear infinite;
animation: pulse 0.6s linear infinite;
}
#keyframes "pulse" {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
#-webkit-keyframes "pulse" {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#-ms-keyframes "pulse" {
0% {
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(1);
transform: scale(1);
}
}
<div class="progress">
<svg viewBox="-10 -10 220 220">
<g fill="none" stroke-width="20" transform="translate(100,100)">
<path d="M-100,0a100,100 0 1,0 200,0a100,100 0 1,0 -200,0" stroke="#FF1252" stroke-linejoin="round" />
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="629"></path>
</svg>
<div class="pulse"></div>
</div>
I've re-written the entire code.
For your first question, you could simply use stroke-linecap="round".
For the second one, you will have to add an extra #keyframes rule for the delay.
body {
background: #072237;
}
h3 {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
}
#ring {
-webkit-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FF1251;
border-radius: 50%;
transform: scale(0.8);
-webkit-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FFFFFF" stroke="#034870" stroke-width="20" stroke-linecap="round" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
No. 1. is possible using stroke-linecap, but it requires some changes to your code, becasue in your case the red line is actually a background and the gray the stroke - so it would result in a concave circle, so "(", not ")" at the end of the red line. 2. can be done using longer animation set to alternate so it "sleeps" between 50% and 100% and back. I've made some changes:
http://jsfiddle.net/3yq3kmo1/
Changes in SVG (the second element):
<svg viewBox="-10 -10 220 220">
<circle r="100" cx="100" cy="100" stroke-dashoffset="0" />
</svg>
CSS (note that the dashoffset has been reversed, so now a red stroke grows and hides the gray, instead of red shrinking and revealing the gray; the stroke on path in first SVG element is gray now.)
.progress svg:nth-child(2) circle {
fill: none;
stroke-width: 20;
stroke-dasharray: 629;
stroke: #ff1251;
stroke-linecap:round;
animation: load 8s;
}
The pause in animation:
.pulse {
animation: pulse 1.6s linear infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}