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.
Related
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;
}
}
I've got a number of elements that I'm animating which I've developed in a manner that shouldn't cause any browser paints. If I turn on "Paint Flashing" in Chrome Devtools I don't see any paint flashing at all. However, if I record the performance then the graph shows that there is a lot of time spent on painting. The FPS is as low as 15fps at times.
I actually built this in Vue, and the compiled code results in too much code to paste here. I realise the animation is somewhat broken, I still need to work out some timings etc - but for the purpose of this question, I'm only concerned about the performance.
I have posted the compiled code here on CodePen:
https://codepen.io/IOIIOOIO/pen/gjBqyg
It seems StackOverflow requires that I post some code here, so here is the compiled code for just one element:
.circle {
position: relative;
width: 100%;
padding-top: 100%;
border-radius: 50%;
overflow: hidden;
}
.circle::before {
content: "";
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
animation-name: switch;
animation-iteration-count: infinite;
animation-timing-function: steps(1);
animation-duration: 3s;
animation-delay: inherit;
}
.rotating-circle {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.rotating-circle--first-cycle {
background-color: black;
animation-name: rotate, toggle-first;
animation-duration: 3s, 3s;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, steps(1);
animation-delay: 1800ms;
}
.rotating-circle--second-cycle {
opacity: 0;
animation-name: rotate, toggle-second;
animation-duration: 3s, 3s;
animation-iteration-count: infinite, infinite;
animation-timing-function: linear, steps(1);
animation-delay: 1800ms;
}
#keyframes rotate {
0% {
transform: rotate3d(0, 1, 0, 0deg);
}
50% {
transform: rotate3d(0, 1, 0, 180deg);
}
}
#keyframes toggle-first {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
}
#keyframes toggle-second {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
}
#keyframes switch {
0% {
transform: translatex(0);
}
50% {
transform: translatex(100%);
}
100% {
transform: translatex(0);
}
}
<div class="circle" style="background-color: rgb(255, 0, 0); animation-delay: 0ms;">
<div class="rotating-circle rotating-circle--first-cycle" style="animation-delay: 0ms;">
</div>
<div class="rotating-circle rotating-circle--second-cycle" style="background-color: rgb(255, 0, 0); animation-delay: 0ms;">
</div>
</div>
It seems that all the work was being done on Composite Layers, and not necessarily on Painting alone. I found that adding transform: translateZ(0) or will-change to the individual elements that were being animated didn't help much. However, if I add transform: translateZ(0) to the parent .circle element then the time spent on Composite Layers and Painting is greatly reduced.
It still runs fairly slow but I think that may just be because my computer has onboard graphics and 4GB of RAM.
So I think this is as good as it will get but would appreciate any further suggestions.
Here is an example where I've added transform: translateZ(0) to the parent element:
https://codepen.io/IOIIOOIO/pen/gjBqyg
EDIT:
I've found a significant improvement by removing border-radius on the parent, which I had set to overflow: hidden to create a mask:
Before:
.circle {
border-radius: 50%;
overflow: hidden;
}
Instead, I used clip-path as a mask:
After
transform: translateZ(0);
clip-path: circle(49% at 50% 50%);
I'm sure you'll notice straight away it's much better:
https://codepen.io/IOIIOOIO/pen/OwBBJV
Any further insight into why this works would be much appreciated.
I have managed to create an SVG animation using an SVG clip path and CSS that works correctly in Google Chrome, Opera and Safari. However, in Firefox, the SVG is clipped but none of the CSS code for the animation seems to be applied.
On other browsers, there is an inital delay of three seconds and then the clip path scales up to gradually reveal the entire image. Does anyone know why I cannot get this code to work on Firefox?
Alternatively, is there any way to ensure that the whole image is displayed in browsers that do not support the animation?
body {
margin: 0;
}
img, svg {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
#carClip {
-ms-transform: scale(0.5) translate(1950px,380px); /* IE 9 */
-webkit-transform: scale(0.5) translate(1950px,380px); /* Safari and Chrome */
-o-transform: scale(0.5) translate(1950px,380px); /* Opera */
-moz-transform: scale(0.5) translate(1950px,380px); /* Firefox */
transform: scale(0.5) translate(1950px,380px);
}
.container {
max-width: 100%;
width: 100%;
overflow:hidden;
background-color: rgb(108,110,112);
}
.clip-shape {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: center center;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: center center;
-webkit-animation: scale 18s forwards 1;
-moz-animation: scale 18s forwards 1;
-o-animation: scale 18s forwards 1;
-ms-animation: scale 18s forwards 1;
animation: scale 18s forwards 1;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes scale {
0% { -webkit-transform: scale(0.5); }
100% { -webkit-transform: scale(11); }
}
#-o-keyframes scale {
0% { -o-transform: scale(0.5); }
100% { -o-transform: scale(11); }
}
#-moz-keyframes scale {
0% { -moz-transform: scale(0.5); }
100% { -moz-transform: scale(11); }
}
#-ms-keyframes scale {
0% { -ms-transform: scale(0.5); }
100% { -ms-transform: scale(11); }
}
#keyframes scale {
0% { transform: scale(0.5); }
100% { transform: scale(11); }
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="auto" viewBox="0 0 1809 692">
<defs>
<clipPath id="carClip">
<polygon class="clip-shape" fill="none" id="thePath" points="174 75 542 0 669 363 396 546 0 324 174 75"></polygon>
</clipPath>
</defs>
<image clip-path="url(#carClip)" width="1809" height="692" xlink:href="http://dev.lexuspreciousmetal.tsadvertising.co.uk/wp-content/themes/lexus/images/banner.png" ></image>
</svg>
</div>
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 }
}
http://jsfiddle.net/cD4Gr/1/
This is my animation code:
#-webkit-keyframes silde_to_top {
0% {
bottom: 0%;
top: default;
}
100% {
bottom: default;
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
#test{
-webkit-animation-name: silde_to_top;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
currently, the div just auto-starts at the top, instead of sliding to the top. the only thing that animates is the opacity.
It can't animate from a percent value to a default/auto value (or vice versa). This code gets it to work, albeit it starts offscreen:
#-webkit-keyframes silde_to_top {
0% {
top: 100%;
}
100% {
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
Here's your fiddle example: http://jsfiddle.net/blineberry/cD4Gr/2/