i want to trigger a animation based on css keyframes from javascript.
After reading through some answers on stackoverflow i tried using the jquery addClass function (click on the blue shape to start the animation):
https://codepen.io/valentin-wei/pen/KKMRrYK
With this approach i can only animate it once.
Is there a way to consistantly animate this shape back and forth by using javascript?
The solution you are looking for is either javascript OR wise use of css-keyframes:
In your codepen sample replace everything inside you css with this code:
test {
background-color: blue;
width:346px;
height:213px;
clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px);
}
.animate {
animation-duration: 3s;
animation-name: animtest;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: forward;
}
.reverseanimate {
animation-duration: 3s;
animation-name: animtest;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: reverse;
}
#keyframes animtest {
0% {
clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}
100% {
clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
}
}
then, replace everything inside you js with this code:
let target = document.getElementById('test');
setInterval(function(){
if ($(target).hasClass("animate")) {
$(target).removeClass("animate");
$(target).addClass("reverseanimate");
}
else {
$(target).addClass("animate");
$(target).removeClass("reverseanimate");
}
}, 3000);
NOTE: I couldn't make an account in codepen for some reason
After some further research i was able to fix this problem.
Instead of using the css animation property i use a transition now:
.animate {
transition: clip-path 3s;
clip-path: polygon(0.00px 168.65px, 0.00px 229.00px, 345.00px 30.17px, 292.64px 0.00px, 0.00px 168.65px)
}
.reverseanimate {
transition: clip-path 3s;
clip-path: polygon(323.19px 0.00px, 0.00px 186.65px, 0.00px 213.00px, 346.00px 13.17px, 323.19px 0.00px)
}
I've also updated my codepen to provide a working example: https://codepen.io/valentin-wei/pen/KKMRrYK
Related
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>
I know that we can use :animated selector to detect animations but it only works for elements animated using jQuery. How can I detect an ongoing keyframe animation with jQuery?
This is my style and markup:
div {
animation-name: animate;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes animate {
0% {
opacity: 0.5;
}
100% {
border-radius: 0.9;
}
}
<div></div>
<div id="mover"></div>
This is my jQuery:
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
$("div:animated").css("background-color","green");
It only changes color of div with id mover.
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
Is there a way to change the duration of a CSS3 keyframes animation with JavaScript? In CSS you can do that with the animation-duration property:
animation-duration: 1s;
The JavaScript should be raw, i don't want to include jQuery or other JS librarys into my site.
You can assign css classes in javascript and put your transition/duration/animation in those css classes Or you can assign your css directly in javascript.
document.getElementById('your_id').style.animationDuration="1s";
for cross browsers we can use o,moz,ms and webkit as prefix.
Example-:
document.getElementById('your_id').style.webkitTransitionDuration="1s";
EXAMPLE
function blink()
{
document.getElementById('blink').className = "animated blink_css";
}
// In css
.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5);
}
//try moz for mozilla,o for opera and webkit for safari and chrome
.blink_css {
-webkit-animation-name: blink;
-moz-animation-name: blink;
-o-animation-name: blink;
animation-name: blink;
}
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).