SVG contiues animation out of css (without css)
Clash Royale CLAN TAG#URR8PPPSVG contiues animation out of css (without css)
I am just over to learn svg animation with use of java-script. Or just simple svg animation. I would like get push to my animation to make it more simple. If you suggest me svg animation program for linux or simple browser software. Here is my code which I would like to simplify.
SVG:
<svg width="250" height="250">
<rect x="100" y="-75" width="150" height="150" id="r1"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect>
<rect x="100" y="-75" width="125" height="125" id="r2"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)"></rect>
<rect x="100" y="-75" width="100" height="100" id="r3"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)" id="r3">
</rect>
<rect x="100" y="-75" width="75" height="75" id="r4"
style="fill:red;stroke: rgb(252, 156, 156);stroke-width:10;opacity:0.25; stroke-radius:20;" transform="rotate(45)" id="r4">
</rect>
</svg>
CSS
#r1
{ -webkit-animation: r1 12s ease-in-out infinite;
-moz-animation: r1 12s ease-in-out infinite;
-o-animation: r1 12s ease-in-out infinite;
animation: r1 12s ease-in-out infinite;
}
@-webkit-keyframes r1 {
0% {
display: none;
opacity: 0;
}
25% {
display: block;
opacity: 0.25;
}
98% {
display: block;
opacity: 0.25;
}
100% {
display: block;
opacity: 0;
}
}
#r2
{ -webkit-animation: r2 12s ease-in-out infinite;
-moz-animation: r2 12s ease-in-out infinite;
-o-animation: r2 12s ease-in-out infinite;
animation: r2 12s ease-in-out infinite;
}
@-webkit-keyframes r2 {
0% {
display: none;
opacity: 0;
}
25% {
display: block;
opacity: 0;
}
50% {
display: block;
opacity: 0.25;
}
98% {
display: block;
opacity: 0.25;
}
100% {
display: block;
opacity: 0;
}
}
#r3
{ -webkit-animation: r3 12s ease-in-out infinite;
-moz-animation: r3 12s ease-in-out infinite;
-o-animation: r3 12s ease-in-out infinite;
animation: r3 12s ease-in-out infinite;
}
@-webkit-keyframes r3 {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0;
}
75% {
display: block;
opacity: 0.25;
}
98% {
display: block;
opacity: 0.25;
}
100% {
display: block;
opacity: 0;
}
}
#r4
{ -webkit-animation: r4 12s ease-in-out infinite;
-moz-animation: r4 12s ease-in-out infinite;
-o-animation: r4 12s ease-in-out infinite;
animation: r4 12s ease-in-out infinite;
}
@-webkit-keyframes r4 {
0% {
display: none;
opacity: 0;
}
75% {
display: block;
opacity: 0;
}
90% {
display: block;
opacity: 0.25;
}
98% {
display: block;
opacity: 0.25;
}
100% {
display: block;
opacity: 0;
}
}
Please if you anybody got time to show me result I will be very happy to get or suggestion to software which you using. Thank you very much
1 Answer
1
I feel your pain! I've tried several different methods of animating SVGs. Short answer, for a good overview of your options, see this article by Sarah Drasner (and Google some of her work--she's amazing!).
Longer answer:
I don't think there are many applications that animate SVG like there are for, say, a GIF or PNG. Even if there were, I'm not sure the animations would have consistent browser support, as they would have to use SMIL to write the animations into the SVG code (which, if you read the above article, you'll know is no longer an upheld standard). Animating via CSS, as you are above, I've found to be inconsistent even between Chrome and Firefox, not to mention IE and Edge. So I think your best bet really is a JavaScript library that can guarantee cross-browser support.
I started with Velocity.js--which was fine, it worked, but I just didn't like the "feel" of the library. It's very JQuery-like (in fact, it kind of "drops in" in place of JQuery's animate() function)--of if you like JQuery, you may like Velocity. Julian Shapiro (the creator) has some cool demos using Velocity.
Most recently, I switched to GreenSock. It's super-flexible, and I think I'd call it kind of the de-facto "industry standard" for SVG animations. I animated several SVGs on my personal portfolio site using Greensock. The loader icon looks like this:
try{
var elone = document.getElementById('one')
var eltwo = document.getElementById('two')
var elthree = document.getElementById('three')
var elfour = document.getElementById('four')
TweenMax.to(elone, .7, { attr:{ r: 10, cx: 20, fill: '#aaa' }, repeat: -1, ease: Power2.easeInOut })
TweenMax.to(eltwo, .7, { attr:{ r: 13, cx: 55, fill: '#fff' }, repeat: -1, ease: Power2.easeInOut })
TweenMax.to(elthree, .7, { attr:{ r: 10, cx: 90, fill: '#aaa' }, repeat: -1, ease: Power2.easeInOut })
TweenMax.to(elfour, .7, { attr:{ r: 5, cx: 80, fill: '#222' }, repeat: -1, ease: Power2.easeInOut })
}
catch(err) {
console.log('GreenSock animation library failed to load or is unsupported; some animations will not work properly.')
}
Pretty simple--define a variable referencing elements within your SVG file, then animate them. You can even create custom easing curves (the Power2.ease stuff at the end of the animation), which I found really cut down on the keyframe % definitions in my CSS.
Hope this provides some direction!
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
