Add custom animation delay for every div with the class "bounce"? - javascript

How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same time.
example:
<div class="360player bounce">
<a href="audio/The_Song.mp3">
The Song
</a>
</div>
Just wondering how I could do this. I searched entire stackoverflow and google but no luck so far.

I have created a similar animation for falling stars. I believe you are going to have to create distinct animation sets each with different delays. It Depends on what you are trying to achieve in my instance I created 5, 6 different animation chains and delayed them each slightly so it appears they are all moving at different times.
Example below
#keyframes fallingstars {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(0deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-870px, 500px) rotateZ(310deg);
}
}
#keyframes fallingstars2 {
0% {
opacity: 1;
transform: translate(0, 0px) rotateZ(25deg);
}
25% {
opacity: 1;
transform: translate(0px, 0px) rotateZ(deg);
}
100% {
opacity: 0;
transform: translate(-570px, 600px) rotateZ(210deg);
}
}
#fallstar {
animation: fallingstars 12s infinite;
animation-delay:5s;
z-index:-1;
}
#fallstar2 {
animation: fallingstars2 12s infinite;
z-index:-1;
}
<img src="stars-ALL.svg" id="fallstar" alt="Stars" style="width:50px; height:50px; top:0px; right:-50px; position:absolute;" />
You could also modify the animation using jquery / js to change the delay. This is just one of several ways to accomplish this. Loop through all your divs, and for each div modify the animation delay. I feel this might be expensive.

I don't know if the CSS library you're using includes it, so here's the specific CSS property you're looking for:
http://www.w3schools.com/cssref/css3_pr_animation-delay.asp
You can apply this attribute on top of an existing CSS animation, perhaps by defining your own seperate class in your page's own CSS file and adding that.
CSS:
.wait300ms {
animation-delay: 300ms;
/*TODO: Add cross-browser attributes */
}
HTML:
<div class="360player bounce wait300ms">

Related

Triggering a new CSS webkit animation while another animation is running

I am relatively new to CSS/JS and I have a problem when triggering a new CSS animation.
I have a <div> that infinitely moves through to some specific points of the screen using a CSS keyframe animation.
I have an image that, when clicked, it triggers a js. function that toggles a new CSS class / animation. My problem is that I want to start this new animation in the position that the current(or last animation) was before toggling the new class.
I don't know how to store the current position from the keyframe and make a new animation starting from it.
To simplify, I have something like this in CSS:
.block {
width: 100px;
height: 100px;
background-color: black;
position: relative;
animation: animate 10s infinite ease-in-out;
animation-play-state: running;
}
#keyframes animate {
0% {
transform: translate(-300px, 20px) rotateY(180deg) scale(1)
}
50% {
transform: translate(1200px, 200px) rotateY(180deg) scale(1.2)
}
100% {
transform: translate(200px, 100px) scale(1.2)
}
}
CSS of the new animation triggered:
.block.new-animation {
animation-play-state: paused;
animation: new-animate 10s infinite ease-in-out;
}
#keyframes new-animate{
from {
// current position
}
to {
transform: translate(500px, 20px) scale(1.5);
}
}
Javascript:
const block = document.querySelector('.block')
const image = document.querySelector('.image')
const togglenewAnimation = () => {
block.classList.toggle('new-animation');
}
image.onclick = () => togglenewAnimation();
What I am trying to do is pause the first animation, and then start the new animation based on the current position the div is located.
Any help is very much apreciated. Thank you!

How do i stop webkit animation through js? + fixing image to the right

I'm trying to build a puzzle game website. I'm using webkit animation to rotate (and translate) two images.
My plan is to have rotating gears attached to the left and right edge of my page, offset in a way that only half of each image is shown at a time.
The animation works fine but
(1) i am unable to pause it, and
(2) depending on window size the images are moved out of view (with an automatic scrollbar popping up) or into full view.
The setup is pretty simple:
I have 3 divs: one bar at the top with 100% width and two divs with 50% width below as containers for my images.
I might need to add more below or in between the two divs down the road but for now a solution for this would be good enough^^
For the animation i have a pseudo button on each side which adds a pause class to my images.
HTML
<div id="div-left">
<p>Hey this is the left div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image1">
<p id="pausebtn1" onclick="pause1()">pause</p>
</div>
<div id="div-right">
<p>hey this is the right div</p>
<img src="images/zahnrad.png" alt="zahnrad" id="image2">
<p id="pausebtn2" onclick="pause2()">pause</p>
</div>
CSS
#image1{
-webkit-animation: rotation-left 30s infinite linear;
}
#image1.paused1::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
#image2{
align: right;
-webkit-animation: rotation-right 30s infinite linear;
}
#image2.paused2::-webkit-progress-value{
-webkit-animaion-play-state:paused;
animaion-play-state:paused;
}
/* Animations */
#-webkit-keyframes rotation-left{
from {
-webkit-transform: translate(-50%,0px) rotate(0deg);
}
to{
-webkit-transform: translate(-50%,0px) rotate(359deg);
}
}
#-webkit-keyframes rotation-right{
from {
-webkit-transform:translate(+50%,0px) rotate(0deg);
}
to{
-webkit-transform:translate(+50%,0px) rotate(-359deg);
}
}
Javascript
function pause1() {
console.log("pause img 1");
document.getElementById('image1').classList.toggle("paused1");
}
function pause2() {
console.log("pause img 2");
document.getElementById('image2').classList.toggle("paused2");
}
So to sum it all up:
I have two images in the wrong places. They are animated. My two buttons are working but trying to pause the animation by adding a paused class doesn't function.
Any help would be appreciated and i'll see if i can add images later
You shouldn't be targeting ::-webkit-progress-value, that's for <progress> elements. Just toggle the class onto the element:
button.addEventListener('click', function () {
square.classList.toggle('paused');
});
#square {
animation: rotate 1s infinite;
background: lightblue;
border: 1px solid black;
height: 100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
}
#square.paused {
animation-play-state: paused;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<button id="button">Pause/Resume</button>
<div id="square">Rotate</div>

Activating the animation of one part of a page by clicking an image in another part

After sifting through a bunch of forums and questions on stackoverflow, it seems to me that using JavaScript is a unavoidable here. I have successfully implemented an animation of a list on my site, but I would like the animation to only play after an image has been clicked (and then to close it by clicked again).
This is the animation:
.scale-in-hor-left { -webkit-animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}
#-webkit-keyframes scale-in-hor-left {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
#keyframes scale-in-hor-left {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
And the image I would like to activate it has nothing special going on
<img id="imagename" src="#" height="#" />
I know the JavaScript looks something like this:
function ani(){
document.getElementById('imagename').className ='scale-in-hor-left';
}
But every time I try some HTML to use the two together, I just end up with a button or nothing, and I have yet to get the animation to stop before the click. (Also, will successfully getting the onclick to work ensure that the animated element is invisible before activation based n the 0%s in the CSS?)
You are right in thinking that you'll want to control the animation with a click event handler; otherwise, as you're seeing, your CSS animation kicks off immediately.
As written, your ani() function will only add your animation class to your target "list" element. You will need to toggle the class name on 'click' to alternately add or remove it. To do that, the event handler needs to determine which action to take.
Assuming that you're attempting to accomplish this in vanilla JavaScript (that is, you aren't using a library like jQuery — which has a .toggleClass() method of its own), you can use the presence of the class name itself to determine this…
var
CLASSNAME_TOGGLE = 'toggle-class',
el_trigger = document.getElementById('trigger'),
el_target = document.getElementById('target');
function toggleClass(event) {
event.preventDefault();
if (el_target.classList.contains(CLASSNAME_TOGGLE)) {
// remove the class
el_target.classList.remove(CLASSNAME_TOGGLE);
} else {
// add the class
el_target.classList.add(CLASSNAME_TOGGLE);
};
}
el_trigger.addEventListener('click', toggleClass, false);
#target {
/* this would be your list's default styles */
padding: 20px;
margin: 20px;
border: 1px solid #fbb;
background: #fee;
}
#target.toggle-class {
/* this would be your list's animation */
border-color: #bfb;
background: #efe;
}
<div id="target">
Your "List" Element [the target of the toggled class]
</div>
<img id="trigger" src="https://via.placeholder.com/300x50?text=Your+Trigger+Image" />
If your okay with using jquery then:
https://api.jquery.com/click/
$("#imagename").click(function() {
$("#imagename").addClass("scale-in-hor-left");
});
Or with vanilla javascript:
document.getElementById("imagename").addEventListener("click", ani); // This calls your function ani

Apply Opacity to Sibling Paragraphs One at a Time During Scroll Animation

I have a figure that wraps a few paragraphs as siblings; the code for which is down below. Also, feel free to run the snippet and hover over the area.
I also have the following style rules to scroll the paragraphs up upon figure:hover...
figure p {
opacity:0;
}
figure:hover p {
opacity:1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
margin: 0;
line-height: 50px;
text-align: center;
-webkit-transform:translateY(100%);
transform:translateY(100%);
-webkit-animation: scroll-up 5s linear infinite;
animation: scroll-up 5s linear infinite;
}
#-webkit-keyframes scroll-up {
0% { -webkit-transform: translateY(100%); }
100% { -webkit-transform: translateY(-100%); }
}
#keyframes scroll-up {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
50% {
opacity:1;
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity:0;
}
}
<figure class="fig_a">
<img src="my_url"/>
<figcaption>
<h2>Hover Somewhere Around Here</span></h2>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
View more
</figcaption>
</figure>
Note that the opacity style results in all the paragraphs becoming 100% transparent at the same time. As the post title suggests, I'm looking for a different style; one that allows for a more nuanced transition. Specifically:
Question: How can I have each paragraph follow its own opacity transition in tandem with its relative position in the scroll transition? In other words, paragraphs that are higher up on the page are more transparent. Likewise, paragraphs who are lower on the page are more opaque.
CSS, JS solutions are all welcome. However I am not working in a jquery environment, so I must use native JS (if JS is needed at all).

CSS how to animate from the recently applied transform?

I am applying a dynamic transform to an element when dragging, for example:
HTML
<div style="transform: `translateX(${distance}px) translateY(-${distance / 10}px) rotate(-2deg) scale(0.9)`">
Drag Me
</div>
However when a certain distance has been reached I complete the animation by adding a custom class, say completeAnimation and the rules go like this:
#keyframes animation {
0% {
}
50% {
transform: translateX(270px) translateY(-50px) rotate(-15deg) scale(0.8);
}
100% {
transform: translateX(470px) translateY(50px) rotate(-15deg) scale(0.8);
}
}
.completeAnimation {
animation-duration: 1s;
animation-name: swipeRight;
animation-fill-mode: animation;
}
But obviously, when the class completeAnimation is applied to the class attribute it jumps back to its default display and directly complete to 100% in the animation css.
Is there a way to start the animation where the last applied style left off?

Categories

Resources