Is it possible to make css animations "plain"? [duplicate] - javascript

This question already has an answer here:
constant animation speed CSS
(1 answer)
Closed 4 years ago.
I´m sorry, I have no idea how to explain this, so i'm just going to give an example:
.MovingDiv {
position: fixed
width: 50px;
height: 50px;
background-color: red;
animation: MovingAnimation 5s;
}
#keyframes MovingAnimation {
0% {left: 0px;}
100% {left: 1000px;}
}
When this css code is used, the object moves from the left side of the screen to the right but i noticed that it starts out slow in the beginning, has a normal speed midway and slows down again at the end. Is there a way that I can maybe, with a little Javascript, make the animation "plain" as in have a constant speed from the beginning to the end?

You are not specifying an animation-timing-function. A setting of linear would probably be what you are looking for.

Try transition-timing-function: linear under .movingDiv

Related

How to Rotate Canvas Element on the X axis with Javascript

I would like to know if there is a specific method to make this kind of animation?
Rotation Axis X:
https://gyazo.com/78c66d5cd8fc0bcb5ab2e0c3ddb77508
Is it possible to do with canvas 2d or to reproduce something similar ?
Thank you
Rather than Canvas, CSS animations would be an ideal candidate for this sort of thing.
eg.
body {
background-color: #444;
}
#keyframes slideDown {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
.outer {
perspective: 500px;
perspective-origin: 50% 0%;
width: 200px;
}
.inner {
padding: 20px 0;
font-weight: bold;
transform-origin: top left;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-name: slideDown;
animation-direction: alternate;
background-color: yellow;
font-size: 50pt;
font-family: arial;
text-align: center;
transform: rotateX(-90deg);
}
<br/>
<center>
<div class="outer">
<div class="inner">Texte</div>
</div>
</center>
Is it possible to do with canvas 2d or to reproduce something similar ?
Yes, it is possible to achieve this effect on a 2d canvas - but it takes an awful lot of coding to do it in vanilla JS.
One approach is to create a second, hidden canvas in which you generate the scene that you want to animate in the existing, visible canvas. Then you need to copy the hidden canvas to the visible canvas on a 1px hight row-by-row basis, calculating the appropriate destination x, y and width values to emulate the 3d effect. However, the result will often include a Moire effect (https://en.wikipedia.org/wiki/Moir%C3%A9_pattern) - the simplest way to get rid of it is to very gently blur the visible canvas until the unwanted interference patterns disappear.
Clearly the above is not an ideal solution - if you can use a WebGL canvas you can make use of 3d canvas libraries (for instance, three.js) which should make generating the effect a lot easier. A CSS approach - as outlined in another answer here - would be an even better solution!
If you really can't move away from the 2d canvas, then you can achieve the effect using the Scrawl-canvas JS library (disclaimer: I maintain this library) - see an example here: https://scrawl-v8.rikweb.org.uk/demo/dom-015.html

React JS and CSS, scroll up all text comments from database

I'm trying to build a post with comments using React, CSS, and Firebase.
I have this post with 10 comments. Now I want to build animation to scroll up the comments, instead of showing all the 10 comments.
First part is my React JS code.
<div className="scroll-up">
{
comments.map((comment) => (
<p>
{comment.text}
</p>
))
}
</div>
The second part is my CSS code:
.scroll-up {
max-height: 100px;
overflow: hidden;
position: relative;
}
.scroll-up p {
position: relative;
width: 100%;
height: 100%;
margin: 0;
transform:translateY(100%);
animation: scroll-up 3s linear infinite;
}
#keyframes scroll-up {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}
The animation works fine if there is only one comment. The comment will scroll up for 3 seconds and repeat. The problem is: if there is more than 1 comment, ALL comments will show up together, on top of each other, and scroll up for 3 seconds.
My question is, how do I let the comments scroll up one by one?
Edit: I took the advice from algo_user, change .scroll-up p position to relative. But now it's showing all comments, scroll up for 3 seconds and repeat. For all 10 comments, 3 seconds only showed the first 4 or 5. My new question is, some post may have 1 comment, some may have 10 comments, how do I scroll them at the same speed, for all comments?
According to w3 School :
position: absolute; -> The element is positioned relative to its first positioned (not static) ancestor element
So, If you change the position property of ".scroll-up p" to initial/relative or even just remove it, then that should work.
You can read more about this property here: https://www.w3schools.com/cssref/pr_class_position.asp

How to move divs from left to right then down using javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hello I have been task to create an image animation that allows the images to move from left to right and then down.
when the images moves down it would have to be overflow hidden as it will go beyond a background image.
The images would be looping continuously, going from left to right and down again. There is a similar example online how to move/slide an image from left to right.
However, this only slides from left to right and then stop. there is also only one image in animation.
Why not just use css?
Here's a fiddle
div {
width: 100px;
height: 100px;
background: red;
position :relative;
animation: mymove 5s infinite;
}
/* Standard syntax */
#keyframes mymove{
0% {top: 0px; left: 0px;}
25% {top: 0px; left: 100px;}
50% {top: 0px; left: 0px;}
75% {top: 50px; left: 0px;}
100% {top: 100px; left: 0px;}
}
I would consider using CSS animations. Is it dynamic in any way? At the end of the keyframe you could simply use overflow: hidden.
Try using the jQuery function animate() as in this example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_right
Simply, find the element you want to be moving by jQuery, call animate on him with the right parameter to 0, then after that call animate again with bottom 0 then place the element again on the beginning without animation and this whole loop infinitely.
I am not sure this will work, just a draft:
$(document).ready(function(){
var element = $("something");
while (true) {
element.animate({right:"0"});
element.animate({bottom:"0"});
element.css("right", "auto").css("bottom", "auto").css("left", "0").css("top", "0");
}
});

How to scroll a div, pause & restart in javascript

How can I make a simple javascript animation to scroll a div (#MyDiv) from say 300px to - 300px over 15 seconds, pause for 15 seconds, then replay, and keep doing this on an endless loop?
I tried with css using multiple methods but its just not smooth enough for my needs.
My experience is that CSS3 animations are almost always more smooth than animations done by Javascript libraries.
Here's a way to do it without any Javascript, with CSS3 animations:
#scrollingContent
{
animation: scroll 30s linear 0s infinite normal;
-webkit-animation: scroll 30s linear 0s infinite normal;
}
#keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
#-webkit-keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
Working demo: http://jsfiddle.net/nj9yfk7b/
And here's an alternative way to do it with native Javascript and CSS3 transitions:
Working demo and code: http://jsfiddle.net/yfk7330j/
In this case, the transitions are triggered by Javascript by setting and un-setting a certain class name on the element that should be scrolling.
The transition version allows for better control with Javascript, while the animation version just does it's looping thing infinitely.
I tried to keep the code clean as possible, but please let me know if it needs any clarification.
Maybe the functions ScrollBy and SetInterval can help you:
http://www.w3schools.com/jsref/met_win_scrollby.asp
http://www.w3schools.com/jsref/met_win_setinterval.asp
You can use the intervals to jump every x ms y pixels, and then wait 15 seconds after you have reached an amount of pixels.
Also, I've seen this JQuery plugin, maybe it can also help (though I haven't researched it properly though):
Scrolld.js
Rememberer that people here won't write the code for you, but will happily help you pass through specific problems.

CSS Keyframe Movements with Delays

I'm stumped with this animation. I have an element that I'm creating a path for movement (not including vendor prefixes in sample):
keyframes Path_1{
0% {left:54%;top:66%;}
50% {left:54%;top:68%;}
100% {left:54%;top:66%;}
}
This creates a simple path movement.
Paths are supplied to some JS like so:
"path" : "54,66||54,68"
The JS loops through all coordinates passed in and automatically generates a path movement keyframe. It also handles adding the last coordinate pair to loop the animation.
I'm wondering if there is any way to supply specific speeds / delays to each point?
keyframes Path_1{
0% {left:54%;top:66%;} <- 1s
50% {left:54%;top:68%;} <- 5s
100% {left:54%;top:66%;} <- 10s
}
Thanks!
You can't provide delays as extra parameters in the keyframe declaration. You basically get percentages within which you define which properties animate from what, to what during the fragment of animation overall time that the percentage defines.
However, there are ways of doing this. I've created a jsfiddle here
.animation {
width: 100px;
height: 50px;
background-color: #f00;
animation: demo 5s ease-in infinite;
}
#keyframes demo {
0% {
width: 100px;
}
50% {
width: 400px;
}
90% {
width: 400px;
}
100% {
width: 100px;
}
}
We can see that the animation is programmed to last 5s, but at one point a delay is achieved by keeping the animated properties static for n%. At 50%, the animation sticks at 400px and stays that way until 90% and the effect is a 2s pause. 40% of 5s = 2s.
Speed is also possible by adjusting the percentage and the overall time. The first section of the animation is slower than the second because the time spent to cover the same distance is just 10% of the overall time rather than 50%.
As usual, CSS Tricks does a great run through of what's available.
Now you just need to define this data in your json and interpret it in your javascript to build the correct keyframe anims, have fun with that!

Categories