constant animation speed CSS
I guess it is making an ease. If you give an option linear, which is the animation's timing function, that works with constant speed and no delay. Let's do this way:
#tableNews { overflow: hidden; margin-right: 5%; width:90%; position: relative; -webkit-animation: mymove 15s linear infinite; /* Chrome, Safari, Opera */ animation: mymove 15s linear infinite;} /* Chrome, Safari, Opera */@-webkit-keyframes mymove { from {top: 60px;} to {top: -200px;}}
@keyframes mymove { from {top: 60px;} to {top: -200px;}}<div id="tableNews">Hi</div>CSS Constant Transition Speed
The best way I've found is using custom properties. In the following example, I'm using 20 to represent one unit of width. When multiplied by .05 we get 1, or a single second. Using a custom property, we can override the transition-width variable to a desired pixel length. The calculation will update dynamically and adjust the transition-duration accordingly.
setTimeout(() => { document.querySelector('.box.one').classList.add('start'); document.querySelector('.box.two').classList.add('start');}, 0);.box { --transition-width: 20; --transition-speed: .05; width: 0px; overflow: hidden; height: 20px; transition-property: width; transition-timing-function: linear; transition-duration: calc(var(--transition-width) * var(--transition-speed) * 1s); background: black;}
.box.one.start { width: 20px;}
.box.two.start { --transition-width: 100; width: 100px;}<div class="box one"></div><div class="box two"></div>CSS animation speed control
The default animation-timing-function in CSS is ease - accelerate in the start, slow after the middle. You need a linear timing function, that has a constant speed.
Change the box timing function to linear (pen):
.box
width: 50px
height: 50px
position: absolute
animation-name: falling
animation-iteration-count: infinite
animation-timing-function: linear
How to set CSS animation speed without JavaScript?
Here is an idea where you can consider the use of position:sticky but I will change how the animation should work.
Using CSS (or even JS) it's impossible to have at once:
- the same start
- the same end
- the same speed.
You can only have 2 of them. In your solution you had the (1) and (2) and below you will have the (2) and (3)
.container { overflow:hidden;}.div1 { clip-path: polygon(0 0, 300px 0, 300px 100%, 0 100%); overflow: hidden; display: inline-flex; white-space: nowrap; flex-direction: column;}
.content { color: white; margin:5px 0; padding:0.5em 0; background: #A1BDAF; position: relative; animation: moving 6s ease-in-out forwards; left: 0;}
.content span { display: inline-block; position: sticky; left: 0;}
@keyframes moving { to { left: calc(300px - 100%); }}<div class="container"> <div class="div1"> <h1 class="content"> <span>The only thing that matters now is everything You think of me</span> </h1>
<h1 class="content"> <span>I want to fix the speed of running text animation </span> </h1>
<h1 class="content"> <span> regardless of the length of the text.</span> </h1>
<h1 class="content"> <span> Is there any way to set not duration but speed of animation</span> </h1>
<h1 class="content"> <span> with out JavaScript?</span> </h1> </div></div>How to make a CSS animation/transition play at a fixed speed, not a fixed duration?
function move(id,x) { document.getElementById(id).style.transitionDuration = (x/200) + 's'; document.getElementById(id).style.marginLeft = x + 'px';}#a,#b { width: 50px; height: 50px; margin-left: 10px; transition-timing-function: linear;}
#a { background-color: red;}
#b { background-color: blue;}<div id='a' onclick="move('a',400)"></div><div id='b' onclick="move('b',250)"></div><button onclick="move('a',400);move('b',250)">Or click here!</button>How to control the animation speed for multiple SVG elements using jQuery?
In this case instead of setting the value of speed as a global variable I'm calculating the speed for every shape.
For the delay I am using a global variable let delay = 0; and then I'm incrementing the value of the delay in the forEach: delay += Number(speed);
For the speed in the svg I'm using a data-speed attribute and for each shape let speed = s.parentNode.dataset.speed;
let svg = document.querySelector("svg")let woyp = document.querySelector("#World-On-Your-Plate")let shapes = woyp.querySelectorAll("g line, g path");
let delay = 0;
shapes.forEach((s, i) => { let totalLength = s.getTotalLength(); let speed = s.parentNode.dataset.speed; delay += Number(speed); s.setAttribute("stroke-dasharray", totalLength); s.setAttribute("stroke-dashoffset", totalLength); s.setAttribute("style", `animation-duration:${speed}s;animation-delay:${delay}s`)})#World-On-Your-Plate * { animation-name: letter-animation; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
@keyframes letter-animation { 100% { stroke-dashoffset: 0; }}
svg{width:90vh}<svg viewBox="8 8 15 15"><g id="World-On-Your-Plate" > <g id="World" stroke="#003668" stroke-width="1" fill="none" data-speed=".7"> <!--W--> <line x1="8.427" y1="9.704" x2="9.47" y2="12.345" clip-path="url(#clip-path-47)" /> <line x1="9.192" y1="12.345" x2="10.212" y2="9.704" clip-path="url(#clip-path-46)" /> <line x1="9.331" y1="9.704" x2="10.374" y2="12.345" clip-path="url(#clip-path-45)" /> <line x1="10.096" y1="12.345" x2="11.115" y2="9.704" clip-path="url(#clip-path-44)" /> <!--O--> <path d="M12.729,9.879a1.1,1.1,0,0,0-.811.348,1.22,1.22,0,0,0-.162,1.367.984.984,0,0,0,.973.6,1.05,1.05,0,0,0,1-.6,1.246,1.246,0,0,0-.163-1.367A1.082,1.082,0,0,0,12.729,9.879Z" transform="translate(0.009 0.01)" clip-path="url(#clip-path-43)" /> <!--R--> <line x1="14.962" y1="9.704" x2="14.962" y2="12.345" clip-path="url(#clip-path-42)" /> <path d="M15.069,9.926h.394a.5.5,0,0,1,.556.533.519.519,0,0,1-.556.533h-.394" transform="translate(0.009 0.01)" clip-path="url(#clip-path-41)" /> <path d="M15,10.992h.509c.232,0,.6.857.788,1.089l.093.093c.093.046.394.162.394.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-40)" /> <!--L--> <line x1="17.578" y1="9.704" x2="17.578" y2="12.345" clip-path="url(#clip-path-39)" /> <path d="M17.707,12.174h.9a.177.177,0,0,0,.116-.047.658.658,0,0,0,.093-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-38)" /> <!--D--> <line x1="19.833" y1="9.704" x2="19.833" y2="12.345" clip-path="url(#clip-path-37)" /> <path d="M19.916,9.949h.626a1.107,1.107,0,0,1,.788.324,1.062,1.062,0,0,1,.3.765,1.089,1.089,0,0,1-.371.834,1.17,1.17,0,0,1-.765.3h-.579" transform="translate(0.009 0.01)" clip-path="url(#clip-path-36)" /> </g> <g id="On-Your" stroke="#BDA484" stroke-width=".5" fill="none" data-speed=".1"> <!--O--> <path d="M11.562,13.471a1.991,1.991,0,0,0-.741.812c-.441.857-.093.95-.093.95" transform="translate(0.009 0.01)" clip-path="url(#clip-path-35)" /> <path d="M10.658,15.21s.394.185,1.09-.788c.648-.927.069-.951.069-.951" transform="translate(0.009 0.01)" clip-path="url(#clip-path-34)" /> <path d="M11.91,13.518s-.209-.116-.533.255a.743.743,0,0,0-.186.556" transform="translate(0.009 0.01)" clip-path="url(#clip-path-33)" /> <!--N--> <path d="M11.771,14.908a.419.419,0,0,1,.162-.185l.278-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-32)" /> <path d="M12.142,14.607a.6.6,0,0,1,.046.116,1.473,1.473,0,0,1-.325.51" transform="translate(0.009 0.01)" clip-path="url(#clip-path-31)" /> <path d="M12.1,15.047a1.971,1.971,0,0,1,.394-.324,2.939,2.939,0,0,1,.348-.186" transform="translate(0.009 0.01)" clip-path="url(#clip-path-30)" /> <path d="M12.744,14.63s.07.047.023.3a.211.211,0,0,0,.093.209" transform="translate(0.009 0.01)" clip-path="url(#clip-path-29)" /> <path d="M12.79,15.117s.024.139.3-.116l.231-.232" transform="translate(0.009 0.01)" clip-path="url(#clip-path-28)" /> <!--Y--> <path d="M14.539,14.028s-.116-.186.3-.371a2.484,2.484,0,0,1,.487-.162" transform="translate(0.009 0.01)" clip-path="url(#clip-path-27)" /> <path d="M15.165,13.518s.139.046-.279.741c-.394.672-.162.9-.162.9s.186.325,1.159-1.437" transform="translate(0.009 0.01)" clip-path="url(#clip-path-26)" /> <path d="M15.952,13.75s-.417.927-.533,1.274c-.417,1.344-.579,1.113-.579,1.113" transform="translate(0.009 0.01)" clip-path="url(#clip-path-25)" /> <path d="M14.949,16.19s-.341-.216.076-.772a6.522,6.522,0,0,1,1.09-.927" transform="translate(0.009 0.01)" clip-path="url(#clip-path-24)" /> <!--O--> <path d="M15.893,14.885a1.748,1.748,0,0,1,.348-.278c.44-.209.463-.185.463-.185" transform="translate(0.009 0.01)" clip-path="url(#clip-path-23)" /> <path d="M16.768,14.5a.784.784,0,0,0-.556.278.28.28,0,0,0,.023.44" transform="translate(0.009 0.01)" clip-path="url(#clip-path-22)" /> <path d="M16.138,15.186s.218.186.494-.172a.3.3,0,0,0,.011-.434" transform="translate(0.009 0.01)" clip-path="url(#clip-path-21)" /> <!--U--> <path d="M16.988,14.885a.487.487,0,0,1,.232-.208l.255-.14" transform="translate(0.009 0.01)" clip-path="url(#clip-path-20)" /> <path d="M17.384,14.561a.742.742,0,0,1-.116.3.258.258,0,0,0,0,.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-19)" /> <path d="M17.251,15.028s0,.29.4-.152A3.814,3.814,0,0,1,18.1,14.5" transform="translate(0.009 0.01)" clip-path="url(#clip-path-18)" /> <path d="M17.922,14.584s.139.069.024.278a.205.205,0,0,0,.09.28" transform="translate(0.009 0.01)" clip-path="url(#clip-path-17)" /> <!--R--> <path d="M17.934,15.143s.058.035.5-.336c.139-.116.556-.417.556-.417" transform="translate(0.009 0.01)" clip-path="url(#clip-path-16)" /> <path d="M18.879,14.491s.162.116-.023.325c-.232.254-.051.35-.051.35" transform="translate(0.009 0.01)" clip-path="url(#clip-path-15)" /> <path d="M18.733,15.094s.05.274.42-.05c.139-.116.343-.266.343-.266" transform="translate(0.009 0.01)" clip-path="url(#clip-path-14)" /> </g> <g id="Plate" stroke="#003668" stroke-width="1" fill="none" data-speed=".7"> <!--P--> <line x1="9.793" y1="17.119" x2="9.793" y2="19.761" clip-path="url(#clip-path-13)" /> <path d="M9.893,17.318a4.2,4.2,0,0,1,.487.024.558.558,0,0,1,.533.579.551.551,0,0,1-.209.463.708.708,0,0,1-.463.163,2.584,2.584,0,0,1-.325-.047" transform="translate(0.009 0.01)" clip-path="url(#clip-path-12)" /> <!--L--> <line x1="12.155" y1="17.119" x2="12.155" y2="19.761" clip-path="url(#clip-path-11)" /> <path d="M12.288,19.59a4.91,4.91,0,0,0,.834,0c.14-.024.325-.255.325-.255" transform="translate(0.009 0.01)" clip-path="url(#clip-path-10)" /> <!--A--> <line x1="14.049" y1="19.761" x2="15.139" y2="17.119" clip-path="url(#clip-path-9)" /> <line x1="14.927" y1="17.398" x2="15.969" y2="19.785" clip-path="url(#clip-path-8)" /> <line x1="14.476" y1="18.881" x2="15.449" y2="18.881" clip-path="url(#clip-path-7)" /> <!--T--> <line x1="16.283" y1="17.328" x2="18.276" y2="17.328" clip-path="url(#clip-path-6)" /> <line x1="17.242" y1="17.328" x2="17.242" y2="19.785" clip-path="url(#clip-path-5)" /> <!--E--> <line x1="19.238" y1="17.119" x2="19.238" y2="19.761" clip-path="url(#clip-path-4)" /> <line x1="19.389" y1="17.328" x2="20.362" y2="17.328" clip-path="url(#clip-path-3)" /> <line x1="19.38" y1="18.339" x2="20.168" y2="18.339" clip-path="url(#clip-path-2)" /> <path d="M19.38,19.59h.788a.438.438,0,0,0,.162-.047c.093-.092.232-.208.232-.208" transform="translate(0.009 0.01)" clip-path="url(#clip-path-1)" /> </g></g> </svg>How to css animate per pixel distance, or consistent speed
You need to calculate distance between current and target positions and divide it by the desired speed to get the duration of the movement:
var field = document.getElementById('field');
var player = document.getElementById('player');
var position_current = {x: -25, y: -25}; // current position
var speed = 200; // pixels per second
field.oncontextmenu = (e) => {
var position_new = {
x: (e.clientX - player.offsetLeft - player.offsetWidth/2),
y: (e.clientY - player.offsetTop - player.offsetHeight/2)
}
var distance = Math.hypot(
position_new.x - position_current.x,
position_new.y - position_current.y,
);
player.style.transitionDuration = (distance/speed) + 's';
player.style.transform = "translate("+ position_new.x + "px," + position_new.y + "px)";
position_current = position_new;
e.preventDefault();
}
How Do I Get Constant Animation Speed?
You are using bootstrap progress bars, which have their own animations supplied via CSS.
Cross-browser compatibility
Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or
older versions of Firefox. Opera 12 does not support animations.
You should not be attempting to use jQuery's animate to animate the changing Bootstraps progress bar. Just set the new value and let CSS animations do their job, or avoid the use of Bootstrap's progress bars and code your own. The styling is very trivial.
Related Topics
Set Chart Area Background Color in Rcharts/Slidify/Nvd3
If I Use .Container-Fluid in Bootstrap 3, Does That Mean I Need to Use Grid Classes
Exclude Menu Item from Collapsing Bootsrap
How to Center This Form in CSS
Visual Studio 2010: Editor Stops Responding to Keyboard
Justify Buttons with Bootstrap V4
Svg Rotation Animation Failing in Ie and Ff
Rowspan and Colspan Problems in Ie
Wrap Bootstrap Navbar List Items Around Centered Brand Image
Creating a Fixed Background for a Website
Different Behaviours for Col-Lg
Strategies for Handling Multiple Screen Resolutions and Aspect Ratios in Web Development