CSS how to animate from the recently applied transform? - javascript

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?

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!

Perfectly smooth looped eased css animation

I'm trying to animate an element to slowly move from left to right a small distance and do it in a smooth way but the result is not very good.
Here is what I have so far:
.animate_sideways{animation:sideways 5s linear infinite; animation-timing-function: ease-in, ease-in-out;};
#keyframes sideways {
50% {
transform: translateX(30px);
}
100% {
transform: translateX(-30px);
}
}
I think the problem is related to the missing start point in the keyframes for the transform attribute.
A minor tweak to your code should correct the issue.
A different animation-timing-function value or time frame (less that 5s for example) may suit you better as well.
.contain { width:100% }
.animate_sideways {
width:40px;
height:40px;
background:#482;
animation:sideways 5s linear infinite;
animation-timing-function:ease-in, ease-in-out;
}
#keyframes sideways {
0% { transform: translateX(-30px) }
50% { transform: translateX(30px) }
100% { transform: translateX(-30px) }
}
<div class="contain">
<div class="animate_sideways"></div>
</div>

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).

Rotating image 2 times

There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/

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

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">

Categories

Resources