I am facing a problem with an svg file in firefox which I was able to boil down to the following code (the original image had a couple of thousend lines of code):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70">
<style type="text/css"><![CDATA[
.sun {
transform-box: fill-box;
animation-name: sun-spoke-rotate;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
.sun path {
transform-box: fill-box;
animation-name: sun-spoke-scale;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g class="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
</g>
</g>
This works as expected in chrome and the newest version of edge. It of course doesn't work at all in Internet Explorer but what really bothers me is that I also has issues in firefox. It works well --- until I start moving the mouse??!! Then it starts to jump all over the place. I figured it has something to do with the transform-box: fill-box. Any ideas?
Replace 50% in transform-origin with the coordinates of the center of rotation in pixels
You can get the coordinates of the center of rotation using the Javascript getBBox() method
The property transform-box: fill-box; in this case must be removed from the CSS rules
// Calculating the center of rotation
let bb = sun.getBBox();
console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70" style="border:1px solid;">
<style type="text/css"><![CDATA[
#sun {
animation-name: sun-spoke-rotate;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#sun path {
animation-name: sun-spoke-scale;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g id="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
<circle
</g>
</g>
I am rotating some words (for some grammar rules) and some of you already nicely helped me tighten up the thing. I would however like to speed up the animation/fade even more to avoid the words overlapping one another. Also how would I go about adding another 10 words without messing up the fade?
Here is my
HTML:
<span>The boy
<div class="rw-words rw-words-1">
<span>see<b>s</b></span>
<span>want<b>s</b></span>
<span>use<b>s</b></span>
<span>find<b>s</b></span>
<span>need<b>s</b></span>
<span>trie<b>s</b></span>
<span>love<b>s</b></span>
<span>leave<b>s</b></span>
<span>call<b>s</b></span>
<span>work<b>s</b></span>
</div><span id="girlWord">the girl.</span><br><br>
And the CSS - I have trouble understanding the animation. I understand the delays that cause the words to appear, but I don't understand where the actual fade is and which part is in/out.
./*/
ROTATING WORDS
/*/
.rw-words{
display: inline;
text-indent: 10px;
}
#girlWord {
margin-left: 4em; /* <-- Add space for the animated words */
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: auto;
color: #0f269e;
}
.rw-words-1 span{
-webkit-animation: rotateWordsFirst 20s linear infinite 0s;
-ms-animation: rotateWordsFirst 20s linear infinite 0s;
animation: rotateWordsFirst 20s linear infinite 0s;
}
}
.rw-words span:nth-child(1) {
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
color: #0f269e;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
color: #0f269e;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
color: #0f269e;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #0f269e;
}
.rw-words span:nth-child(5) {
-webkit-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
color: #0f269e;
}
.rw-words span:nth-child(6) {
-webkit-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
color: #0f269e;
}
.rw-words span:nth-child(7) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #0f269e;
}
.rw-words span:nth-child(8) {
-webkit-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
color: #0f269e;
}
.rw-words span:nth-child(9) {
-webkit-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
color: #0f269e;
}
.rw-words span:nth-child(10) {
-webkit-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
color: #0f269e;
}
}
#-webkit-keyframes rotateWordsFirst {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#-ms-keyframes rotateWordsFirst {
0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsFirst {
0% { opacity: 1; -webkit-animation-timing-function: linear; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 0; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#media screen and (max-width: 768px){
.rw-sentence { font-size: 18px; }
}
#media screen and (max-width: 320px)
Here is jsfiddle.
https://jsfiddle.net/rh98fsom/
I am not an expert, but I believe you can keep adding these and just increase each one by 2 as you have above. interested to see if anyone else has some input. this part you can condense by putting them together, and now you can see where your animation fade in/out occurs:
/*enter code here*/
.rw-words span:nth-child(# ...) {
/*enter code here*/
#keyframes rotateWords {
0% {
opacity: 0 ;
}
8% {
opacity: 1 ;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
19% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Could anybody explain me how to remove a point in my path and why did it come from?
window.onload =function(){
var myHeart = $("#Heart");
var current = 0;
var PathTail_MainPath = $("#PathTail_MainPath");
var tailMainPath = $("#tailMainPath");
myHeart.click(function () {
if (current++ % 2 == 0) {
PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
console.log("one");
} else {
PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
console.log("two");
}
});
};
#Heart {
width: 600px;
border: 1px solid #000;
cursor: pointer;
}
#Heart .tailMainPath {
-webkit-animation: tailStroke 500ms linear;
animation: tailStroke 500ms linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#Heart .tailMainPathReturn {
-webkit-animation: tailStrokeReturn 500ms linear 125ms;
animation: tailStrokeReturn 500ms linear 125ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes tailStroke {
0% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
}
#keyframes tailStroke {
0% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
}
#-webkit-keyframes tailStrokeReturn {
0% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
100% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
}
#keyframes tailStrokeReturn {
0% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
100% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
<defs>
<path id="PathTail_MainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
<path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
</defs>
<use xlink:href="#PathTail_MainPath" fill="none"; stroke="#000" stroke-width="11"/>
<use xlink:href="#tailMainPath" fill="none"; stroke="#A50808" stroke-linecap="round" stroke-width="9"/>
</svg>
PS This code doesn't work on code generator stackoverflow's.(I don't know why) That why I made copy here https://jsfiddle.net/BlackStar1991/ea6255h1/
The dirty dot is caused by "0 length" sub path with rounded line cap. When value of stroke-dashoffset is 0, the path is split by [0, 150]. So it has "0 length" sub path.
To solve this problem, you can offset the start point of line dash a bit.
#keyframes tailStroke {
0% {
stroke-dasharray: 0 151;
stroke-dashoffset: 1;
}
100% {
stroke-dasharray: 151 0;
stroke-dashoffset: 151;
}
}
#keyframes tailStrokeReturn {
0% {
stroke-dasharray: 151 0;
stroke-dashoffset: 151;
}
100% {
stroke-dasharray: 0 151;
stroke-dashoffset: 1;
}
}
I've been trying to animate this heart SVG and this codepen seems to work fine in chrome, firefox, and safari on Mac but in IE 11+ I can't seem to find a resolution anywhere.
All I need it to do is to fade in, grow, and fade out but IE doesn't seem to scale up in the keyframe no matter what I try.
Thanks in advance!
<svg version="1.1" class="svg-pulse" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 42.7" enable-background="new 0 0 60 42.7" xml:space="preserve">
.svg-pulse { width: 100vw; height: 100vh; }
#-webkit-keyframes svg_pulse { 0% {
radius: 10;
transform-origin: center center;
transform: scale(.1);
opacity: 0; } 25% {
opacity: .1; } 50% {
opacity: .1; } 100% {
transform-origin: center center;
transform: scale(.8);
opacity: 0; } }
#keyframes svg_pulse { 0% { /* radius: 5; */
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(.1);
transform: scale(.1);
opacity: 0; } 25% {
opacity: .1; } 50% {
opacity: .1; } 100% {
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(.8);
transform: scale(.8);
opacity: 0; } }
.svg-pulse .pulse { animation: svg_pulse 6s ease; animation-iteration-count: infinite; fill: hotpink; }
.svg-pulse .two { opacity: 0; animation-delay: 1.5s; }
.svg-pulse .three { opacity: 0; animation-delay: 3s; }
.svg-pulse .four { opacity: 0; animation-delay: 4.5s; }
Msdn_svg Even according to Microsoft simple SVG animation does not work on Internet Explorer, without the addition of JavaScript.
[MSDN_SVG_animationGuide][1]
This is in agreement with my own experience.
I am new to CSS3 keyframe animations and I'm trying to create animation with three images, where each image would stay for 2 seconds, then change to 2nd image, which would stay 2 seconds as well and then change to the last 3rd image, which would also stay 2 seconds. This animation would then loop back to the first image...second...third...etc.
I have created the following Fiddle: http://jsfiddle.net/klarita/yyRQ8/
I know the stylesheet is a mess at the moment as I can't work it out, Could anyone advice please.
I will need to use the same technique for 6 images later on, just need to understand how it all works.
HTML:
<div id="crossfade">
<img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="Image 1">
<img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" alt="Image 2">
<img src="http://farm3.static.flickr.com/2657/5739934564_357f849b58_z.jpg" alt="Image 3">
</div>
CSS:
#crossfade > img {
width: 185px;
height: 185px;
position: absolute;
top: 100px;
left: 100px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 10s linear infinite 0s;
-moz-animation: imageAnimation 10s linear infinite 0s;
-o-animation: imageAnimation 10s linear infinite 0s;
-ms-animation: imageAnimation 10s linear infinite 0s;
animation: imageAnimation 10s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-o-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}
#keyframes imageAnimation {
0% { opacity: 1;
-webkit-animation-timing-function: ease-in; }
50% { opacity: 0;
-webkit-animation-timing-function: ease-out; }
100% { opacity: 1 }
}