SVG circuit breaker/switch close animation - javascript

I am trying to design a circuit breaker/switch which closes and opens on certain events. I have designed the breaker using SVG and using css animation and transform properties to animate the closing of it.
Using transform-origin: bottom but its not working as desired. Please help me following is my css code:
.closeme {
-webkit-animation-name: closeanimaton;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: -1.5s;
-webkit-animation-direction: alternate;
-webkit-transform-origin: bottom;
animation-name: closeanimaton;
animation-duration: 3s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-delay: -1.5s;
animation-direction: alternate;
animation-fill-mode: forwards;
transform-origin: bottom;
-moz-animation: none;
}
#-webkit-keyframes closeanimaton {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(35deg); }
}
#keyframes closeanimaton {
0% { transform: rotate(0deg); }
100% { transform: rotate(35deg); }
}
here is codepen link where i have the whole code, please feel free to edit:
https://codepen.io/anon/pen/OQexEP

This might not be what you have asked help for, but I find it alot easier to work with D3 to create the shapes and add animation to them. Check out my snippet below. It might give you an inspiration on how you may want to do the SVG animation.
var svg = d3.select('body').append("svg").attr("width",200).attr("height",150);
svg.style("background-color","black");
var part1 = svg.append("path").attr("d","M100,0 L100,30").attr("fill","none").attr("stroke","white");
var part2 = svg.append("path").attr("d","M100,80 L100,150").attr("fill","none").attr("stroke","white");
var moving_part = svg.append("g").attr("transform","translate(100,80) rotate(45)");
moving_part.append("path").attr("d","M0,0 L0,-50").attr("fill","none").attr("stroke","gold").attr("stroke-width",2);
moving_part.append("circle").attr("cy",-50).attr("r",5).attr("fill","gold");
moving_part.transition().delay(1000).duration(3000).attr("transform","translate(100,80) rotate(0)");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Related

Nativescript rotate animation with infinite iteration not working

I want to rotate label with infinite iteration, currently it is working fine on iOS devices but on android it only rotates for 2 sec and then stop.
Below is my CSS code
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
.spin {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<Label text="rotate value" class="fas spin"></Label>
I'm not sure if its a bug, can't expect {N} to be inline with Browsers as we are dealing with native elements here. The hack below seems to work,
#keyframes rotate {
0% {transform: rotate(0deg);}
99.9% {transform: rotate(360deg);}
100% {transform: rotate(0deg);}
}

How to stop and reset an animation without destroying the original tag object?

I am trying to reset the animation of an object to it's initial point, so that I can restart it from the beginning.
function swap_animation(node, from, to) {
let t = node.style.animationDuration;
node.style.animationDuration = "0s";
node.style.animationPlayState = "initial";
setTimeout(function(){
node.style.animationDuration = t;
node.classList.remove(from);
node.classList.add(to);
}, 10);
}
function grow() {
let node = document.getElementById("item");
swap_animation(node, "shrink", "grow");
}
function shrink() {
let node = document.getElementById("item");
swap_animation(node, "grow", "shrink");
}
.grow {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
.shrink {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-direction: reverse;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
#keyframes title-min
{
from { transform: scale(0.5); }
to { transform: scale(1.0); }
}
<body>
<button onclick="grow()">Eat me! 🍰</button>
<button onclick="shrink()">Drink me! 🍹</button>
<h1 id="item">Alice 💃</h1>
</body>
The sample shows that if you click between Eat me! and Drink me!, Alice grows and shrinks in the course of 10 seconds. However, if you toggle between the two, you will note that the animation is continuing on from where it was before switching.
I think I read somewhere that one way to do this is to clone the object and replace the old one with a new one. That seems really overkill and I would think could cause performance problems, more so if the object is large, and would also be bad as it can cause memory fragmentation.
There must be some way to keep the object and modify it's properties to fix this, isn't there?
Ok, well I found a answer. It is to trigger a reflow. Got the answer from this site. Not exactly sure what the void is doing there though.
function swap_animation(node, from, to) {
node.classList.remove(from);
void node.offsetWidth;
node.classList.add(to);
}
function grow() {
let node = document.getElementById("item");
swap_animation(node, "shrink", "grow");
}
function shrink() {
let node = document.getElementById("item");
swap_animation(node, "grow", "shrink");
}
.grow {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
.shrink {
animation-name: title-min;
animation-duration: 10s;
animation-timing-function: linear;
animation-direction: reverse;
animation-fill-mode: forwards;
transform-origin: 0% 100% 0;
}
#keyframes title-min
{
from { transform: scale(0.5); }
to { transform: scale(1.0); }
}
<body>
<button onclick="grow()">Eat me! 🍰</button>
<button onclick="shrink()">Drink me! 🍹</button>
<h1 id="item">Alice 💃</h1>
</body>

Why does CSS rotate stutters when i have a background process? IE and FF

I have a simple CSS code that rotates an image when it is clicked, As shown bellow. This is standard spinner code that i toggle when its clicked.:
CSS:
.rotate {
-webkit-animation-name: spinner;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinner;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinner;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#-webkit-keyframes spinner
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
#-moz-keyframes spinner
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
#-ms-keyframes spinner
{
from{-ms-transform:rotate(0deg);
}
to{
-ms-transform:rotate(360deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
}
#keyframes spinner {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
The CSS works just fine and smoothly up until it reaches this part of my JS code. Does IE or FF have a hard time doing 2 things at once? I dont get why it works just fine on Chrome:
JS:
var datas = _.map(sourceData, function (item, index) {
return new sourceItem(item,index);
});
Yes, Animations and loops always pull up a lot of resources. try executing them one by one.
Delay the execution using
setTimeout(function(){
// code here
},100); // milliseconds

Delay Keyframes per defined time and keep opacity 0 after animation

I've been using HTML5 and Css3 to build an animated banner, but I have a few issues I can't find a work around for at the moment.
Heres a quick bit of code to use for an example, imagine this is a div layer with an image assigned to it.
First off is Opacity, it works until the end of the timeline animation then re-appears, is there a css way to get round this or would I have to use javascript?
Secondly is transition delay, I would of thought I could do a keyframe delay and freeze it for a few seconds inbetween each transition, but it never takes effect. If anyone can help I'd aprpeaciate it!
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
50% {
-webkit-transition-delay:10s;
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation
}
FIrst off is the delay command, Transition-delay and animation-delay, both
*******Update************
Opacity is solved, to get it to finish after the animation, have your First frame 0% set to opacity 0. If that's a problem set a frame to 1% set it to opacity 1.
Then add forwards on the end of your animation i've been doinbg it shorthand so something like this.
#bannerImg {
-webkit-animation: bannerImg-animation1 3s 0s 1 ease-in-out forwards}
I couldn't find a way to make the code nice to look at but since starting delays and animations from within an animation itself does not seem to work I stuck the following together:
#-webkit-keyframes animation {
0% {
opacity:1;
-webkit-animation-timing-function: ease;
-webkit-transform: translateY(0px);
}
18.75% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
81.25% {
opacity:1;
-webkit-animation-timing-function: ease-in;
-webkit-transform: translateY(300px);
}
100% {
opacity:0;
-webkit-animation-timing-function: ease-inout;
-webkit-transform: translateY(900px);
}
}
#animation {
-webkit-animation-delay: 0s;
-webkit-animation-duration: 16s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: animation;
}
JSFiddle
This solution just uses 18.75% and 81.25% as markers for the delay, changing nothing during that time (10 seconds).

Set CSS animation delay with javascript

I have some keyframe animations in my css file. There is already an animation-delay specified.
The wrapper div has the attribute data-delay.
I want to get the animation-delay in the css file and add the value of data-delay to it.
Then i want that the animation start with the new delay.
I tried ele[i].style.animationDelay.
But it seems that this returns null until I set a value to it.
If I set ele[i].style.animationDelay = '5s' the animation still runs with the delay of the css file.
HTML
<div id="wrapper" data-delay="2s" >
<h1 id="hi">Hi</h1>
<h1 id="name">test!</h1>
</div>
CSS
body { font-size: 300%; }
#wrapper h1 { position: absolute; }
#hi {
transform: translate(-200px, 100px);
animation-name: hi;
animation-duration: .5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#name {
transform: translate(-200px, 150px);
animation-name: name;
animation-duration: .5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
#keyframes hi{
100% { transform: translate(50px, 100px) };
}
#keyframes name{
100% { transform: translate(50px, 150px) };
}
JS
var wrapper = document.getElementById('wrapper');
var ele = wrapper.children;
var delay = wrapper.getAttribute('data-delay');
for (var i=0;i<ele.length;i++) {
alert(ele[i].style.animationDelay);
ele[i].style.animationDelay = delay;
alert(ele[i].style.animationDelay);
}
http://jsfiddle.net/FHuKN/4/
I've only tested this on Mac 10.8 Chrome 25, Safari 6.0, and FF 18.0.
Sounds like the main thing you wanted to do was add the data-delay value to whatever existing animation delay was applied to the elements.
HTML - unchanged
<div id="wrapper" data-delay="5.1s" >
<h1 id="hi">Hi</h1>
<h1 id="name">test!</h1>
</div>
CSS - Vendor prefixes and initial keyframes (0%) were added.
body { font-size: 300%; }
#wrapper h1 { position: absolute; }
#hi {
-webkit-transform: translate(-200px, 100px);
-webkit-animation-name: hi;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2.1s;
-moz-transform: translate(-200px, 100px);
-moz-animation-name: hi;
-moz-animation-duration: .5s;
-moz-animation-timing-function: linear;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: 2.1s;
transform: translate(-200px, 100px);
animation-name: hi;
animation-duration: .5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 2.1s;
}
#name {
-webkit-transform: translate(-200px, 150px);
-webkit-animation-name: name;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 3.1s;
-moz-transform: translate(-200px, 150px);
-moz-animation-name: name;
-moz-animation-duration: .5s;
-moz-animation-timing-function: linear;
-moz-animation-fill-mode: forwards;
-moz-animation-delay: 3.1s;
transform: translate(-200px, 150px);
animation-name: name;
animation-duration: .5s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 3.1s;
}
#-moz-keyframes hi{
0% { -moz-transform: translate(-200px, 100px); }
100% { -moz-transform: translate(50px, 100px); }
}
#-webkit-keyframes hi {
0% { -webkit-transform: translate(-200px, 100px); }
100% { -webkit-transform: translate(50px, 100px); }
}
#keyframes hi{
0% { transform: translate(-200px, 100px); }
100% { transform: translate(50px, 100px); }
}
#-moz-keyframes name {
0% { -moz-transform: translate(-200px, 150px); }
100% { -moz-transform: translate(50px, 150px); }
}
#-webkit-keyframes name {
0% { -webkit-transform: translate(-200px, 150px); }
100% { -webkit-transform: translate(50px, 150px); }
}
#keyframes name {
0% { transform: translate(-200px, 150px); }
100% { transform: translate(50px, 150px); }
}
JAVASCRIPT
On an element, the style property doesn't hold all the style information because it only represents what is being set directly on the element via the style attribute. MDN
window.getComputedStyle() seems to work pretty well.
Juggling the prefixed properties is a little clunky, but it worked in the browsers I tested with.
(function(undefined) {
var wrapper = document.getElementById('wrapper'),
elms = wrapper.children,
delay = wrapper.getAttribute('data-delay'),
prop,
styl,
cur,
i;
delay = !delay ? 0 : Number(delay.replace(/[^\d\.]/g, ''));
if (!elms.length) {
return;
}
styl = window.getComputedStyle(elms[0]);
if (styl.getPropertyValue('animation-delay')) {
prop = 'animation-delay';
} else if (styl.getPropertyValue('-webkit-animation-delay')) {
prop = '-webkit-animation-delay';
} else if (styl.getPropertyValue('-moz-animation-delay')) {
prop = '-moz-animation-delay';
} else {
console.log('unable to find prop');
return;
}
// console.log('prop', prop);
for (i = 0; i < elms.length; i++) {
styl = window.getComputedStyle(elms[i]);
cur = styl.getPropertyValue(prop);
cur = Number(cur.replace(/[^\d\.]/g, ''));
elms[i].style.setProperty(prop, (cur + delay) + 's');
console.log('delay: ' + cur + 's -> ' + (cur + delay) + 's')
}
})();
http://jsfiddle.net/FHuKN/11/
Old Firefoxes (at least up to 16), Opera before migrating to Blink (<15), IE at least 10 - will not redraw the animation if we just change some of its attributes like (-prefix-)animation-delay. In order to make them do so, we have to apply some depper tricks.
The first will be removing and reinserting the animated element. And - for the sake of Webkit - applying all the style changes on it.
Just change the code from #tiffon's fiddle
elms[i].style.setProperty(prop, (cur + delay) + 's');
To
var newEl = elms[i].cloneNode(true);
newEl.style.setProperty(prop, (cur + delay) + 's', '');
elms[i].parentNode.replaceChild(newEl,elms[i]);
http://jsfiddle.net/FHuKN/28/
Remove the class name ar the attribute value, which the animation is attached to, wait for a bit (setTimeout) of - better - trigger the reflow (say, element.offsetWidth = element.offsetWidth;), and add the class name again.
http://jsfiddle.net/FHuKN/29/
The idea is not mine, all credit goes to Chris Coyer

Categories

Resources