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.
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";
}
The snippet below shows a spinning circle. Every 1 second I want this circle to double in size and then shrink back to it's original size(to look like a heartbeat). The way I am attempting to do this is by creating a timer in javascript so that every one second, the class which causes the grow effect is removed from the circle, and then immediately added back on. I was hoping that having the class added back on after being removed would trigger the animation but I guess not. Right now the "heartbeat" only happens once.
Also I would like to have the circle spinning at constant speed if that's possible. Right now the circle really slows down at the end, and starts a little bit slow.
// set timeout
let tid = setTimeout(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
tid = setTimeout(mycode, 1000); // repeat myself
}
function abortTimer() { // to be called when you want to stop the timer
clearTimeout(tid);
}
#spinning-circle {
animation-name: spinning-circle;
animation-duration: 10s;
animation-iteration-count: infinite;
width: 40px;
height: 40px;
}
.heartbeat {
width: 100%;
height: 100%;
animation-name: heartbeat;
animation-duration: 0.15s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-fill-mode: both;
}
#inner-circle img {
width: 100%;
height: auto;
}
#-webkit-keyframes heartbeat {
100% {
transform: scale(2,2);
-webkit-transform: scale(2,2);
}
}
#-webkit-keyframes spinning-circle {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>
use setInterval() and clearInterval() instead of setTimeout(), and remove the setTimeout() inside the function mycode()
// set timeout
let tid = setInterval(mycode, 1000);
function mycode() {
// do some stuff...
let ic = document.getElementById('inner-circle')
ic.classList.remove('heartbeat')
ic.classList.add('heartbeat')
}
function abortTimer() { // to be called when you want to stop the timer
clearInterval(tid);
}
and for the animation speed add animation-timing-function: linear; to .heartbeat {} and #spinning-circle {}
You don't need javascript at all:
#spinning-circle {
margin-top: 40px;
margin-left: 40px;
animation: spinning-circle linear 10s infinite;
width: 40px;
height: 40px;
overflow: visible;
}
#inner-circle {
animation: heartbeat 1s infinite;
}
#inner-circle img {
width: 100%;
height: auto;
}
#keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(2);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes spinning-circle {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(-1turn);
}
}
<div id="spinning-circle">
<div id='inner-circle'>
<img src="http://i.stack.imgur.com/WbNlQ.jpg">
</div>
</div>
According to the Mozilla Web Animations API docs, "The getAnimations() method of the Document interface returns an array of all Animation objects currently in effect whose target elements are descendants of the document. This array includes CSS Animations, CSS Transitions, and Web Animations."
Is there any way to use this to only add the Web animation objects to the array, excluding the CSS Animations and CSS transitions?
The following code returns all the animations on the document:
var allAnimations;
if (typeof document.getAnimations === 'function') {
allAnimations = document.getAnimations();
} else {
allAnimations = document.timeline.getAnimations();
}
allAnimations array result is this:
Array(72) [ CSSTransition, CSSTransition, CSSTransition, CSSTransition, CSSTransition, CSSTransition, Animation, Animation, Animation, Animation, … ]
I would like it to only consist of the web animations, so like this:
Array(66) [ Animation, Animation, Animation, Animation, Animation, Animation, Animation, Animation, Animation, Animation, … ]
You can check the type of animation you're looking at using instanceof, and use that to filter the list:
const animations = [
...document.getAnimations(),
new Animation(),
];
const isCSSAnimation = x => x instanceof CSSAnimation;
const onlyAnimations = animations.filter(x => x.constructor.name === 'Animation');
console.dir(animations);
console.dir(onlyAnimations);
.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-5px);
}
}
#keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
#animated-example {
width: 20px;
height: 20px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
border-radius: 50%;
}
hr {
position: relative;
top: 92px;
left: -300px;
width: 200px;
}
<div id="animated-example" class="animated bounce"></div>
So the element That I am manipulating has an id of spinning and a class of rotors
I can get my element to spin. I did this by using the css code here:
.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation:spin .5s linear infinite;
-moz-animation:spin .5s linear infinite;
animation:spin .5s linear infinite;
} #-moz-keyframes spin { 100% { -moz-transform:rotate(360deg);}}
#-webkit-keyframes spin { 100% { -webkit-transform:rotate(360deg);}}`
#keyframes spin { 100% { -webkit-transform:rotate(360deg);}}
But Say instead of it spinning automatically on the page load that I could press a button with an id of one and it would start to spin, and if I press a second button with an id of two, it would spin even faster then the first.
I am not sure how to achieve this. I did see where some people pointed out that you can change the css of an element using javascript but am unsure on how to achieve this especially on a button click. I want it to be something like getElementById(spinning).style.property = but on button click and just changing the speed of the rotation of my element.
One option would be to change the animation-duration CSS property dynamically with JavaScript.
var rotors = document.querySelector(".rotors");
function fast() {
rotors.style.animationDuration = ".2s";
}
function slow() {
rotors.style.animationDuration = ".5s";
}
.rotors {
height: 50px; /* for demo purpose */
width: 50px; /* for demo purpose */
animation: spin .5s linear infinite;
}
#keyframes spin {
100% { transform: rotate(360deg); }
}
<p>
<button onclick="fast()">Fast</button>
<button onclick="slow()">Slow</button>
</p>
<img class="rotors" src="https://cdn.onlinewebfonts.com/svg/img_489361.png" />
Add 2 buttons and use it to change the classes like below:
function startSpinning(){
var spDiv = document.getElementById('test');
if(spDiv.classList.contains('rotorsFast')){
spDiv.classList.remove('rotorsFast');
spDiv.classList.add('rotors');
}else{
spDiv.classList.add('rotors');
}
}
function startSpinningFast(){
var spDiv = document.getElementById('test');
if(spDiv.classList.contains('rotors')){
spDiv.classList.remove('rotors');
spDiv.classList.add('rotorsFast');
}else{
spDiv.classList.add('rotorsFast');
}
}
.rotors {
position: relative;
top: 90px;
left: 30px;
-webkit-animation: spin .5s linear infinite;
-moz-animation: spin .5s linear infinite;
animation: spin .5s linear infinite;
}
.rotorsFast {
position: relative;
top: 90px;
left: 30px;
-webkit-animation: spin .2s linear infinite;
-moz-animation: spin .2s linear infinite;
animation: spin .2s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
` #keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
<div id="test" style="width:20px">apple</div>
<button onclick="startSpinning()">spin</button>
<button onclick="startSpinningFast()">spin Fast</button>
This is a nice spot to use a CSS custom variable. When the button is clicked, we toggle a secondary class on the .rotors div. When the faster class is present, the custom variable resets the animation speed to the faster speed, which is automatically applied to the animation.
const rotors = document.querySelector('.rotors');
const btn = document.querySelector('.rotorButton');
btn.addEventListener('click', () => {
rotors.classList.toggle('faster')
});
.rotors {
--spin-speed: 2s; /* Initial speed */
position: relative;
top: 40px;
left: 30px;
background-color: yellow;
color: black;
display: inline-block;
animation: spin var(--spin-speed) linear infinite;
}
.rotors.faster {
--spin-speed: .5s; /* Faster speed 🔥 */
}
#keyframes spin {
100% {
transform: rotate(360deg);
}
}
<div class="rotors">text</div>
<button class="rotorButton" type="button">Toggle Rotor Speed</button>
jsFiddle
I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.
In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.
Here is what I have so far and it seems like it should work but it's not.
function updateTransition(id) {
var myElement = document.getElementById(id);
var opacity = myElement.style.opacity;
if (opacity==null || opacity=="") opacity = 1;
myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}
var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
background-color:#f3f3f3;
width:100px;
height:100px;
top:40px;
left:40px;
font-family: sans-serif;
position: relative;
animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>
Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
The linked question is not the same as this. As I stated, "single line styles (not style declarations)".
What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.
.fade {
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:fadeinout, slidein;
animation-duration:2s, 1s;
animation-iteration-count:infinite, 1;
animation-direction:alternate, normal;
}
#keyframes fadeinout {
0% {
opacity:0
}
100% {
opacity:100
}
}
#keyframes slidein {
from {
left:-100px;
}
to {
left:0px;
}
}
<div class='fade'>
</div>
You can use animation-iteration-count :
#myElement {
background-color: #f3f3f3;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
font-family: sans-serif;
position: relative;
animation: slidein 2s linear alternate;
animation-iteration-count: infinite;
}
#keyframes slidein {
0% {
opacity: 0;
left: -100px;
}
50% {
opacity: 1;
left: 40px;
}
100% {
opacity: 0;
left: -100px;
}
}
<div id="myElement"></div>