I have this code and it works on my PC browser, and Galaxy Note 4 phone. It animates an SVG element. But when I test on a Moto X phone (Chrome browser), it does not work. Does anyone know why? I tried to put in all the prefix tags.
#keyframes example {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#left_leg_group {
animation: example 1s linear infinite;
/* and here*/
animation-timing-function: ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-origin: 50% -10%;
-moz-transform-origin: 50% -10%;
-ms-transform-origin: 50% -10%;
-o-transform-origin: 50% -10%;
transform-origin: 50% -10%;
}
#right_leg_group {
animation: example 1s linear infinite;
/* and here*/
animation-timing-function: ease-in-out;
animation-delay: 0.1s;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-origin: 50% -10%;
-moz-transform-origin: 50% -10%;
-ms-transform-origin: 50% -10%;
-o-transform-origin: 50% -10%;
transform-origin: 50% -10%;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g id="main">
<g id="left_leg_group">
<rect id="left_1" x="81" y="129" fill="#653508" width="17" height="40" />
<rect x="81" y="141" fill="#3B2111" width="17" height="5" />
<path id="foot" fill="#A07044" d="M98,180H75c0,0-4.875-0.021-4.875-5.625S75,169,75,169h23V180z" />
</g>
<g id="torso_group">
<path fill="#653508" d="M138,141H63V65.021c0,0-1.751-29.521,37.167-29.521S138,65.021,138,65.021V141z" />
</g>
<g id="right_leg_group">
<rect id="Left_3_" x="109" y="129" fill="#653508" width="17" height="40" />
<rect x="109" y="141" fill="#3B2111" width="17" height="5" />
<path id="foot_1_" fill="#AE7A49" d="M126,180h-23c0,0-4.875-0.021-4.875-5.625S103,169,103,169h23V180z" />
</g>
<g id="right_arm_group">
<path fill="#653508" d="M138,73.21c0,0-13,0.123-13,4.957s13,5.824,13,5.824c1,0.01,0.725,0.01,1.005,0.01
c17.58,0,31.747-14.25,31.747-31.83c0-17.19-13.752-31.2-30.752-31.81v11.43c10,1.98,19.67,10.43,19.67,20.55
C159.67,63.15,149,72.05,138,73.21z" />
<path fill="#AE7A49" d="M133.33,25.75c0,5.25,4.835,5.72,4.835,5.72c0.67,0.07,1.835,0.18,1.835,0.32V20.36
c0-0.01-0.605-0.02-0.995-0.02c-0.28,0-0.478,0-0.757,0.01C138.248,20.35,133.33,20.5,133.33,25.75z" />
</g>
<g id="left_arm_group">
<path fill="#653508" d="M41.206,52.34C41.206,42.22,51,33.77,61,31.79V20.36c-17,0.61-30.876,14.62-30.876,31.81
C30.124,69.75,44.229,84,61.809,84c0.281,0-0.025,0,0.975-0.01c0,0,12.984-0.99,12.984-5.824c0-4.833-12.946-4.956-12.946-4.956
C51.821,72.05,41.206,63.15,41.206,52.34z" />
<path fill="#AE7A49" d="M67.422,25.75c0,5.25-4.711,5.72-4.711,5.72C62.041,31.54,61,31.65,61,31.79V20.36
c0-0.01,0.481-0.02,0.871-0.02c0.28,0,0.416,0,0.695,0.01C62.566,20.35,67.422,20.5,67.422,25.75z" />
</g>
<g id="head_group">
<circle id="face" fill="#AE7A49" cx="95.207" cy="70.543" r="28.042" />
<path id="Right_Eye" fill="#200200" d="M82.25,65h-2.37c0-1.31-1.07-2.38-2.38-2.38s-2.38,1.07-2.38,2.38h-2.37
c0-2.62,2.13-4.75,4.75-4.75S82.25,62.38,82.25,65z" />
<path id="left_eye_1" fill="#200200" d="M106.25,65h-2.37c0-1.31-1.069-2.38-2.38-2.38c-1.31,0-2.38,1.07-2.38,2.38h-2.37
c0-2.62,2.13-4.75,4.75-4.75S106.25,62.38,106.25,65z" />
<circle id="mouth" fill="#200200" cx="89.104" cy="70.938" r="5.271" />
<polygon id="forehead" fill="#915B36" points="104,51 81,51 81.688,49 103.312,49 " />
<polygon id="forehead_1" fill="#915B36" points="110,56 76,56 76.75,54 109.125,54 " />
</g>
</g>
</svg>
#keyframe also needs prefixing, as does animation. Also, you are setting animation-timing-function to ease-in-out after explicitly setting it in animation (animation: example 1s linear infinite;).
Try this:
#-webkit-keyframes example {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes example {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#left_leg_group {
-webkit-animation: example 1s ease-in-out infinite;
animation: example 1s ease-in-out infinite;
/* and here*/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-origin: 50% -10%;
-moz-transform-origin: 50% -10%;
-ms-transform-origin: 50% -10%;
-o-transform-origin: 50% -10%;
transform-origin: 50% -10%;
}
#right_leg_group {
-webkit-animation: example 1s ease-in-out 0.1s infinite;
animation: example 1s ease-in-out 0.1s infinite;
/* and here*/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-origin: 50% -10%;
-moz-transform-origin: 50% -10%;
-ms-transform-origin: 50% -10%;
-o-transform-origin: 50% -10%;
transform-origin: 50% -10%;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g id="main">
<g id="left_leg_group">
<rect id="left_1" x="81" y="129" fill="#653508" width="17" height="40" />
<rect x="81" y="141" fill="#3B2111" width="17" height="5" />
<path id="foot" fill="#A07044" d="M98,180H75c0,0-4.875-0.021-4.875-5.625S75,169,75,169h23V180z" />
</g>
<g id="torso_group">
<path fill="#653508" d="M138,141H63V65.021c0,0-1.751-29.521,37.167-29.521S138,65.021,138,65.021V141z" />
</g>
<g id="right_leg_group">
<rect id="Left_3_" x="109" y="129" fill="#653508" width="17" height="40" />
<rect x="109" y="141" fill="#3B2111" width="17" height="5" />
<path id="foot_1_" fill="#AE7A49" d="M126,180h-23c0,0-4.875-0.021-4.875-5.625S103,169,103,169h23V180z" />
</g>
<g id="right_arm_group">
<path fill="#653508" d="M138,73.21c0,0-13,0.123-13,4.957s13,5.824,13,5.824c1,0.01,0.725,0.01,1.005,0.01
c17.58,0,31.747-14.25,31.747-31.83c0-17.19-13.752-31.2-30.752-31.81v11.43c10,1.98,19.67,10.43,19.67,20.55
C159.67,63.15,149,72.05,138,73.21z" />
<path fill="#AE7A49" d="M133.33,25.75c0,5.25,4.835,5.72,4.835,5.72c0.67,0.07,1.835,0.18,1.835,0.32V20.36
c0-0.01-0.605-0.02-0.995-0.02c-0.28,0-0.478,0-0.757,0.01C138.248,20.35,133.33,20.5,133.33,25.75z" />
</g>
<g id="left_arm_group">
<path fill="#653508" d="M41.206,52.34C41.206,42.22,51,33.77,61,31.79V20.36c-17,0.61-30.876,14.62-30.876,31.81
C30.124,69.75,44.229,84,61.809,84c0.281,0-0.025,0,0.975-0.01c0,0,12.984-0.99,12.984-5.824c0-4.833-12.946-4.956-12.946-4.956
C51.821,72.05,41.206,63.15,41.206,52.34z" />
<path fill="#AE7A49" d="M67.422,25.75c0,5.25-4.711,5.72-4.711,5.72C62.041,31.54,61,31.65,61,31.79V20.36
c0-0.01,0.481-0.02,0.871-0.02c0.28,0,0.416,0,0.695,0.01C62.566,20.35,67.422,20.5,67.422,25.75z" />
</g>
<g id="head_group">
<circle id="face" fill="#AE7A49" cx="95.207" cy="70.543" r="28.042" />
<path id="Right_Eye" fill="#200200" d="M82.25,65h-2.37c0-1.31-1.07-2.38-2.38-2.38s-2.38,1.07-2.38,2.38h-2.37
c0-2.62,2.13-4.75,4.75-4.75S82.25,62.38,82.25,65z" />
<path id="left_eye_1" fill="#200200" d="M106.25,65h-2.37c0-1.31-1.069-2.38-2.38-2.38c-1.31,0-2.38,1.07-2.38,2.38h-2.37
c0-2.62,2.13-4.75,4.75-4.75S106.25,62.38,106.25,65z" />
<circle id="mouth" fill="#200200" cx="89.104" cy="70.938" r="5.271" />
<polygon id="forehead" fill="#915B36" points="104,51 81,51 81.688,49 103.312,49 " />
<polygon id="forehead_1" fill="#915B36" points="110,56 76,56 76.75,54 109.125,54 " />
</g>
</g>
</svg>
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'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>
When I scale up an SVG it is blurry only in Chrome, it is perfect in Firefox and almost perfect in IE. I have tried to achieve the same effect with SMIL but it is still blurred.
Codepen is here
I have been searching for a fix but I have been unable to find one.
Thanks
CSS:
.svg-container{
-webkit-backface-visibility: hidden;
-webkit-animation: scaling 4s linear infinite alternate forwards;
animation: scaling 4s linear infinite alternate forwards;
transform: scale(16, 16) translateZ(0);
-webkit-transform: scale(16, 16) translateZ(0);
}
#-webkit-keyframes scaling {
from {
-webkit-transform: scale(16, 16) translateZ(0);
-ms-transform: scale(16, 16) translateZ(0);
transform: scale(16, 16) translateZ(0);
}
to {
-webkit-transform: scale(0.75,0.75) translateZ(0);
-ms-transform: scale(0.75,0.75) translateZ(0);
transform: scale(0.75,0.75) translateZ(0);
}
}
#keyframes scaling {
from {
-webkit-transform: scale(16, 16) translateZ(0);
-ms-transform: scale(16, 16) translateZ(0);
transform: scale(16, 16) translateZ(0);
}
to {
-webkit-transform: scale(0.75,0.75) translateZ(0);
-ms-transform: scale(0.75,0.75) translateZ(0);
transform: scale(0.75,0.75) translateZ(0);
}
}
HTML:
<div class="svg-container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="644px" height="474px" viewBox="0 0 644 474" style="enable-background:new 0 0 644 474;" xml:space="preserve">
<style type="text/css">
.st0 {fill: #22B573;stroke: #000000;stroke-width: 23;stroke-miterlimit: 10;}
.st1 {fill: #39B54A;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}
.st2 {fill: #00723D;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}
</style>
<circle class="st2" cx="381.307" cy="280.325" r="135.276" />
<circle class="st1" cx="381.307" cy="280.325" r="112.99" />
<circle class="st0" cx="381.307" cy="280.325" r="67.177" />
</svg>
</div>
Here is how this looks now:
.svg-container{
-webkit-backface-visibility: hidden;
-webkit-animation: scaling 4s linear infinite alternate forwards;
animation: scaling 4s linear infinite alternate forwards;
transform: scale(16, 16) translateZ(0);
-webkit-transform: scale(16, 16) translateZ(0);
}
#-webkit-keyframes scaling {
from {
-webkit-transform: scale(16, 16) translateZ(0);
-ms-transform: scale(16, 16) translateZ(0);
transform: scale(16, 16) translateZ(0);
}
to {
-webkit-transform: scale(0.75,0.75) translateZ(0);
-ms-transform: scale(0.75,0.75) translateZ(0);
transform: scale(0.75,0.75) translateZ(0);
}
}
#keyframes scaling {
from {
-webkit-transform: scale(16, 16) translateZ(0);
-ms-transform: scale(16, 16) translateZ(0);
transform: scale(16, 16) translateZ(0);
}
to {
-webkit-transform: scale(0.75,0.75) translateZ(0);
-ms-transform: scale(0.75,0.75) translateZ(0);
transform: scale(0.75,0.75) translateZ(0);
}
}
<div class="svg-container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="644px" height="474px" viewBox="0 0 644 474" style="enable-background:new 0 0 644 474;" xml:space="preserve">
<style type="text/css">
.st0 {fill: #22B573;stroke: #000000;stroke-width: 23;stroke-miterlimit: 10;}
.st1 {fill: #39B54A;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}
.st2 {fill: #00723D;stroke: #000000;stroke-width: 6;stroke-miterlimit: 10;}
</style>
<circle class="st2" cx="381.307" cy="280.325" r="135.276" />
<circle class="st1" cx="381.307" cy="280.325" r="112.99" />
<circle class="st0" cx="381.307" cy="280.325" r="67.177" />
</svg>
</div>
Try setting an explicit width and height pixel value as #Erik Dahlstöm suggested. I already had a width, but setting an explicit height was all I needed.
vs
I want my initials "CND" to rotate like this:
http://jsfiddle.net/rukC6/1/
HTML:
<head>
</head>
<body>
<div align="center">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRTCKie7zNcXtCeCjnMsE8kyg7D9fC_-Hllk7VaNoXIGHPLxbWP" class="animation-rotate"/>
</div>
</body>
</html>
CSS:
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.animation-rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
but my code is making it rotate around a wide circle instead of staying in the center:
http://codepen.io/CaptnChristiana/pen/hCsHn
HTML:
<svg xmlns="http://www.w3.org/2000/svg" width="399" height="378" viewBox="0 0 399 378"><style type="text/css"><![CDATA[
.st1{fill:none;stroke:#15ADBC;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#15ADBC;stroke:#15ADBC;stroke-width:4;stroke-miterlimit:10;}
.st3{fill:none;stroke:#1D1E1E;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}]]></style>
<path class="st1" d="M99.972 180.794l175.591 58.929-123.703 85.748zM45.64 210.785l59.428-127.262-5.096 97.271-54.332 29.991 106.22 114.686 174.202-31.196M105.385 82.349l128.825.633-134.238 97.812M308.37 154.665l17.692 139.61-50.499-54.552 32.807-85.058-73.179-71.466.12 2.235 40.252 154.289"/>
<circle class="st2" cx="105.385" cy="82.349" r="3.263"/>
<circle class="st2" cx="235.191" cy="83.199" r="3.263"/>
<circle class="st2" cx="308.349" cy="154.892" r="3.263"/>
<path class="st2" d="M329.321 294.1c.097 1.799-1.284 3.336-3.084 3.434-1.8.096-3.336-1.283-3.433-3.082-.098-1.803 1.283-3.338 3.082-3.434 1.801-.098 3.339 1.281 3.435 3.082z"/>
<circle class="st2" cx="151.861" cy="325.471" r="3.263"/>
<circle class="st2" cx="46.478" cy="209.807" r="3.263"/>
<circle class="st2" cx="99.973" cy="180.795" r="3.263"/>
<circle class="st2" cx="275.564" cy="239.723" r="3.264"/>
<g class="initials">
<path class="st3" d="M233.525 239.931c4.9.225 10.302-.09 15.021-1.492 14.457-4.304 24.611-19.246 26.432-33.729 1.84-14.646-6.16-28.656-18.408-36.203-15.918-9.807-31.015-3.852-31.015-3.852l-19.523 97.735-25.52-117.075-19.141 93.81c-15.568 4.092-30.443.303-41.066-12.182-14.854-17.457-6.279-37.685-6.279-37.685 11.439-27.958 38.459-25.105 38.459-25.105"/></g></svg>
CSS:
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.initials {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
Set the transform-origin property to 50% 50%:
Updated Example
.st3 {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
It's worth noting that the initial/default value of the transform-origin property is 50% 50% 0.