I want to add button to toggle the animation for this fiddle. I have added the following code but I'm not able to toggle (start and stop) the animation.
body .a [class^="b"] {
width: 200px;
height: 142.8571428571px;
margin: 0 auto;
position: relative;
left: 71.4285714286px;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
border-radius: 100% 300%;
background: radial-gradient(bottom left, transparent 41.4285714286px, #ff0c0c 41.4285714286px, #3f0000 -15px, #ff0c0c 71.4285714286px);
/* -webkit-box-shadow: 71.4285714286px 71.4285714286px 142.8571428571px darkred;*/
box-shadow: 71.4285714286px 71.4285714286px 142.8571428571px rgb(164, 69, 14);
-webkit-animation-duration: 5s;
animation-duration: 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
demo is here: https://jsfiddle.net/xianshenglu/bjwhm3bf/3/
first,i remove this code to html,and change it's value to stop
<input type="button" id="button" value="stop"></input>
second,i give the button css:
body #button {
z-index:1;
position:absolute;
left:0;
top:0;
}
third,i add this javascript :
document.getElementById('button').addEventListener('click', function() {
var animationPlayStateEle = document.querySelectorAll('.a [class^="b"]');
if (this.value === 'start') {
Array.from(animationPlayStateEle, function(ele) {
ele.style.animationPlayState = 'running';
});
this.value = 'stop';
} else if (this.value === 'stop') {
Array.from(animationPlayStateEle, function(ele) {
ele.style.animationPlayState = 'paused';
});
this.value = 'start';
}
}, false);
then ,job finished;
the core is that,when you click the button and the button's value==='stop',i change this
.a [class^="b"] {
animation-play-state: play;
}
to
.a [class^="b"] {
animation-play-state: paused;
}
in the javascript by change the element's style;
and when you click the button and the button's value==='start',i change this
.a [class^="b"] {
animation-play-state: paused;
}
to
.a [class^="b"] {
animation-play-state: running;
}
clear?
Related
I am having a little trouble in using javascript to access a css animation. My goal in this code is if you click the next button or previous button the border should spin but I am having trouble to trigger the css animation.
This is my html
<template>
<div v-on:click="prev" class="prevButton"><p><</p></div>
<div class="borderTop"></div>
<div v-on:click="next" class="nextButton"><p>></p></div>
</template>
This is the css
.border{
position: fixed;
height: 500px;
width: 500px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
border: 120px solid rgba(0, 0, 0, 0.555);
transform: rotate(45deg);
-webkit-animation: spin 2s linear; /* Safari */
animation: spin 2s linear;
}
#keyframes spin {
0% { transform: rotate(0deg);
border-right: 120px solid rgba(255, 255, 255, 0.226);}
100% { transform: rotate(360deg); }
}
this is the javascript
prev(){
document.querySelector(".borderTop").animate;
}
next(){
document.querySelector(".borderTop").animate;
}
You can't trigger the animation from Javascript. Instead you should add your animation style to an additional class which you can add to the div for the duration of the animation.
.animate {
animation: spin 2s linear;
}
Add anther class with animation-direction: reverse; if you would like to reverse the animation for the prev button.
prev() {
document.querySelector('.borderTop').classList.add('animate');
// Remove the animate class after the spin was performed so it works again when the button is clicked.
setTimeout(function() {
document.querySelector('.borderTop').classList.remove('animate');
}, 2000)
});
}
next() {
document.querySelector('.borderTop').classList.add('animate');
setTimeout(function() {
document.querySelector('.borderTop').classList.remove('animate');
}, 2000)
});
}
let borderAnimatable = document.querySelector(".borderTop")
prev(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}
next(){
borderAnimatable.style.animation = "spin 2s linear";
borderAnimatable.style.WebkitAnimation = "spin 2s linear";
}
I'm making time(second) bar.
When opening page, bar's width should be (second/60)*100%.
I want to start from 50% instead of the beginning.
Using jquery or javascript.
Please tell me about.
#loader {
width: 50%;
height: 5px;
background-color: #fff;
animation-name: loadingBar;
animation-duration: 60s;
animation-timing-function: steps(60, end);
animation-direction: normal;
animation-play-state: running;
animation-iteration-count: infinite;
#keyframes loadingBar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Hi Could you try this overwrite the style existing.And also remove it if required to get old behavior
function setStyle() {
let st = document.createElement("style");
st.id="RemoveMeInFuture";
const stext=`#keyframes loadingBar {
50% {
width: 0%;
}
100% {
width: 100%;
}
}
.foo{background:red}`;
document.querySelector("head").appendChild(st);
if (st.styleSheet){
// This is required for IE8 and below.
st.styleSheet.cssText = stext;
} else {
st.appendChild(document.createTextNode(stext));
}
}
This question already has answers here:
Restart animation in CSS3: any better way than removing the element?
(14 answers)
Closed 4 years ago.
I am new to CSS but do know the basics, I want to trigger this animation by using a button. I cannot get it to work.
I used a couple of examples here in Stackoverflow, Jquery, Jscript, but none seem to refer to the #keyframes .
I see more about referring to an animation via classes and removing classes (As I understand this way to restart the animation by removing the element). I tried switching it to classes.
I also then wonder what is best practise?
What is the best way? I thought it would be simple, but I was mistaken.....
I have CSS like so:
#test {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes example {
from { transform: translateY(200px)}
to {height: 200px; background-color: teal;}
}
I am unable to reproduce the issue you described with your CSS.
See sample below:
This answer will be deleted once the question is edited with a mcve.
Please note:
If you question is about best practices, then it'd be off-topic for StackOverflow. See our how to ask page
$(function() {
$("#test-btn").on('click', function() {
$("#test").addClass('animation');
});
});
.animation {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#keyframes example {
from {
transform: translateY(200px)
}
to {
height: 200px;
background-color: teal;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test-btn">Animate</button>
<hr/>
<div id="test"></div>
In case you decide to scrap jQuery (or you have to work without it), in order to toggle the CSS animation on your #test element using vanilla JavaScript, separate your animation-related CSS properties into a class:
.animate {
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
Then toggle (add/remove) the .animate class on the #test element:
button.addEventListener('click', function() {
if (isAnimating) {
element.classList.remove('animate');
button.innerHTML = 'Add animation';
} else {
element.classList.add('animate');
button.innerHTML = 'Remove animation';
}
isAnimating = !isAnimating;
});
var element = document.getElementById('test');
var button = document.getElementById('toggle');
var isAnimating = false;
button.addEventListener('click', function() {
if (isAnimating) {
element.classList.remove('animate');
button.innerHTML = 'Add animation';
} else {
element.classList.add('animate');
button.innerHTML = 'Remove animation';
}
isAnimating = !isAnimating;
});
#test {
margin-left: 20px;
margin-top: 20px;
width: 50px;
height: 0px;
background: maroon;
position: absolute;
}
.animate {
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
#toggle {
margin-left: 100px;
}
#keyframes example {
from {
transform: translateY(200px)
}
to {
height: 200px;
background-color: teal;
}
}
<div id="test"></div>
<button id="toggle">Add animation</button>
I need to chain two animations in my interface HTML/CSS on user event (here just a click on the document). The first animation start correctly, but when I want to restart the second animation nothing move ?
I know if i remove the .rotaiotn class and with a timeout put other animation class for the element, the second animation start from the first position of the element.
I want to know if exist a solution to start the second animation from the position of the blue ball after the first animation ?
document.addEventListener('click', startAnimation, false);
var isFisrtAnim = false;
function startAnimation(evt) {
var elt = document.querySelector('#blue_ball');
if (!isFisrtAnim) {
elt.setAttribute('class', 'rotation');
} else {
elt.setAttribute('class', 'rotation2');
}
elt.addEventListener("animationend", animationAtEnd, false);
}
function animationAtEnd(evt) {
evt.preventDefault();
isFisrtAnim = !isFisrtAnim;
var elt = evt.target;
// todo here get new position of elt to start another animation
// from the new position after first animation
var new_margin_top = window.getComputedStyle(elt).getPropertyValue('margin-top');
var new_margin_left = window.getComputedStyle(elt).getPropertyValue('margin-left');
console.log('At end new margin-top : ' + new_margin_top + ' - new margin-left : ' + new_margin_left);
// positions are the same of start element ? they are not modify ?
}
#circleNav {
background: rgba(215, 229, 231, 0.4) !important;
margin-top: 100px;
margin-left: 120px;
border-radius: 50%;
width: 335px;
height: 335px;
border: 2px solid #0e6694;
}
img {
max-width: 100%;
}
#blue_ball {
position: absolute;
margin-top: -350px;
margin-left: 165px;
width: 70px;
height: 70px;
border: none;
z-index: 5;
transform-origin: 120px 180px;
}
.rotation {
-webkit-animation: rotation 3s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(240deg);
}
}
.rotation2 {
-webkit-animation: rotation 3s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
#-webkit-keyframes rotation2 {
from {
-webkit-transform: rotate(240deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
<h2>
CLICK ON THE BODY TO START ANIMATION
</h2>
<h4>
When the Blue ball stop click an other time to start second animation, but don't work ?
</h4>
<div id="circleNav"></div>
<div id="blue_ball">
<a href="#">
<img id="btn_menu" src="http://mascaron.net/img/mini_rond_logo.png">
</a>
</div>
smaple code on jsfiddle
thanks in advance.
Just one question, in css:
.rotation2 {
-webkit-animation: rotation 3s linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
should not be:
.rotation2 {
-webkit-animation: rotation2 3s linear; /* <----- here, rotation2
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards !important;
}
In js part, why not use elem.classList https://developer.mozilla.org/fr/docs/Web/API/Element/classList to manipulate css class property.
I am trying to show a css animation when hovering on nav li a. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any jS or jQuery since I could get any to work but below you have a jsfiddle ready to go. All help highly appreciated.
.box {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff
}
#-webkit-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-moz-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#-o-keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
#keyframes dropdownbar {
0% { height: 0px; }
100% { height: 35px; }
}
<nav class="nav">
<ul>
<li class="navLink">Home</li>
<li class="navLink">Away</li>
</ul>
</nav>
<div class="box">this should show only when hovering li element</div>
FIDDLE
You can use jQuery to trigger the CSS3 animation with a class change :
DEMO
CSS :
.box {
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
width:100%;
background-color:#000;
color:#fff;
height:0;
}
.box.show {
-webkit-animation: dropdownbar 1s ease;
-moz-animation: dropdownbar 1s ease;
-o-animation: dropdownbar 1s ease;
animation: dropdownbar 1s ease;
height:35px;
}
#-webkit-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-moz-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#-o-keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
#keyframes dropdownbar {
0% {height: 0px;}
100% {height: 35px;}
}
jQuery :
$('nav li a').hover(function () {
$('.box').toggleClass('show');
});
You can try this jQuery. You just have to modify it to your needs... but this should get you started.
$(".navLink").mouseenter(function(){
$(".box").css("visibility", "visible")
});
$(".navLink").mouseleave(function(){
$(".box").css("visibility", "hidden")
});
If you put this in your javascript part in jsFiddle, it works.
You have to add style for div box as
<div class="box" style="display:none">
and add following javascript code:
$(document).ready(function(){
$(".navLink").hover(function(){
$(".box").toggle();
});
});
See the updated fiddle: Updated fiddle
There you go :). assumes jquery is up and running!
$(document).ready(function() {
var divToShow = $('.box');
var links = $('.navLink');
var fadeDuration = 500;
//initial hiding of div
divToShow.hide();
//add listener when mouse enters hover-state on link
links.mouseenter(function() {
//stop animation if there is one
divToShow.stop();
//fade it in
divToShow.fadeIn();
});
//add listener for when mouse leaves link
links.mouseleave(function() {
//stop animation if there is one
divToShow.stop();
//fade it out
divToShow.fadeOut();
});
});
this initially hides your div and fades it in and out when hovered. Compared to the other solutions this also takes care of switching from hovering from one link to another without appruptly changing the animation. totally smooth... ;)
Just select jQuery 2.1 and paste this in you jsFiddle...should work immediately!