I am trying to change the speed of the keyframe by changing animationDuration. but everytime i change the animationDuration, the box that is animated changes positions(jumps). Is there any way to change the speed without of it jumping?
Thank you in advance.
The code is here, im sry for not seperating them to js/css/html files.
var styles;
function togglePlayState(newState) {
document.getElementById("boxx").style.animationPlayState = newState;
}
var sliderSpeed = document.getElementById("MoveSpeed");
sliderSpeed.oninput = function() {
styles = window.getComputedStyle(boxx);
document.getElementById('boxx').style.animationDuration = +sliderSpeed.value.toString() + "s";
console.log(sliderSpeed.value + "s");
console.log(styles);
}
body {
height: 100%;
top: 0px;
left: 0px;
margin-top: 0%;
margin-left: 0%;
}
.parent {
background-color: rgb(0, 0, 0);
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: 0%;
}
.boxx {
background-color: red;
position: relative;
height: 50px;
width: 50px;
animation: left-to-right 3s forwards infinite alternate linear;
}
.start-animation {
animation: left-to-right 3s forwards infinite alternate linear;
}
.paused {
animation-play-state: paused;
}
#keyframes botleft-to-topright {
/*Koumpi katw aristera Panw deksia*/
0% {
left: 0;
top: calc(100% - 50px);
}
100% {
left: calc(100% - 50px);
top: 0;
}
}
#keyframes left-to-right {
0% {
left: 0;
top: 0;
}
100% {
left: calc(100% - 50px)
}
}
<div class="parent">
<div class="boxx" id="boxx"></div>
<button onclick="togglePlayState('Paused');">Pause Animation</button>
<!-- Play Pause Buttons -->
<button onclick="togglePlayState('Running');">Continue Animation</button>
<!-- Play Pause Buttons -->
<div class="slidecontainer">
<input type="range" min="1" max="15" value="1" class="slider" id="MoveSpeed">
</div>
</div>
It is not possible to do that mid animation with pure css animations. In order to do that you would need to use a js animation library like GSAP. See this answer for an example.
I am trying to get this effect at my site. example:https://rno1.com/
(scroll down to "we specialize in")
I am very new to HTML and CSS also I am working on WordPress which make it a little bit harder.
started to code with this question here at StackOverflow:
Change body background image on hover with pure html/css
but I wanted to add a transition between the swapping images, also where do I need to change the font attributes?
div.link>a {
displya: inline-block !important;
position: relative !important;
z-index: 100;
}
.bg1:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg2:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.background {
background: transparent;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background>
</div>
</div>
</div>
You can add some opacity transition like below:
div.link>a {
display: inline-block;
position: relative;
z-index: 100;
}
.bg1+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover +.background {
opacity:1;
}
.bg2+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover +.background {
opacity:1;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background>
</div>
</div>
</div>
You can also optimize your code like below:
div.link>a {
display: inline-block;
}
.bg1:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover:before {
opacity:1;
}
.bg2:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover:before {
opacity:1;
}
.bg:before {
content:"";
position: fixed;
z-index:-1;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
bg1
bg2
</div>
</div>
When an elements display goes from none to some other value its animation(if it has any) activates.
Does anyone know how to prevent this?
Also it would be nice to understand why this happens. Is because the DOM is being reflown?
Here is an example of what I mean for reference:
https://jsfiddle.net/darlyp/2p2q767r/
HTML
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
CSS
.red-square{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare{
0%{
margin-left: 0px;
}
50%{
margin-left: 400px;
}
100%{
margin-left: 0px;
}
}
JS
document.getElementById('btn').addEventListener("click", function() {
var currentDisplay = document.querySelector('.red-square').style.display;
if (currentDisplay === 'none') {
document.querySelector('.red-square').style.display = 'inline-block';
} else {
document.querySelector('.red-square').style.display = 'none';
}
})
https://jsfiddle.net/darlyp/2p2q767r/
When you display it, you could set the animation-play-state to paused.
JSfiddle
document.getElementById('btn').addEventListener("click", function() {
var currentDisplay = document.querySelector('.red-square').style.display;
if (currentDisplay === 'none') {
document.querySelector('.red-square').style.display = 'inline-block';
document.querySelector('.red-square').style.animationPlayState = 'paused';
} else {
document.querySelector('.red-square').style.display = 'none';
}
})
.red-square{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare{
0%{
margin-left: 0px;
}
50%{
margin-left: 400px;
}
100%{
margin-left: 0px;
}
}
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
Another way would be to toggle opacity instead, and change the height to 0 when it's hidden so it doesn't occupy any space on the page.
document.getElementById('btn').addEventListener("click", function() {
document.querySelector('.red-square').classList.toggle('hide');
})
.red-square {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare {
0% {
margin-left: 0px;
}
50% {
margin-left: 400px;
}
100% {
margin-left: 0px;
}
}
.hide {
opacity: 0;
height: 0;
}
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
I am facing an issue in css3 animation in IE11 only.
Here is link with issue (please open in ie11)
$(document).ready(function() {
$(".spinnerTinyBar").show();
$("#toggle").click(function() {
$(".spinnerTinyBar").toggle();
});
});
#keyframes tinybar-load1 {
0% {
box-shadow: 0 0 blue;
height: 20px;
}
40% {
box-shadow: 0 -15px blue;
height: 25px;
}
80% {
box-shadow: 0 0 blue;
height: 20px;
}
100% {
box-shadow: 0 0 blue;
height: 20px;
}
}
.spinnerTinyBar,
.spinnerTinyBar:before,
.spinnerTinyBar:after {
background: blue;
animation: tinybar-load1 1s infinite ease-in-out;
width: 2px;
height: 20px;
}
.spinnerTinyBar:before {
left: -5px;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinnerTinyBar {
font-size: 9px;
position: relative;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
transform: translateZ(0);
}
.spinnerTinyBar:after {
left: 5px;
}
.spinnerTinyBar:before,
.spinnerTinyBar:after {
position: absolute;
top: 0;
content: "";
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="toggle" value="Toggle" />
<div class="spinnerTinyBar"></div>
JSFiddle
Issue:
For first time, the animation is working good. When I toggle by clicking on toggle button the animation is not happening for 1st and last bar. This is working fine in chrome and in all mobile devices.
Let me know if anybody figured it out and do the needful
It's a weird one this but here's a fix:
Change your html to this:
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".spinnerTinyBar").show();
$("#toggle").click(function(){
$(".divClass").toggleClass('spinnerTinyBar');
});
});
</script>
<input type="button" id="toggle" value="Toggle"/>
<div class="divClass spinnerTinyBar"></div>
</body>
Instead of hiding the element we simply change the class on it to show the animation, or not
Here's an updated fiddle working in ie11
Try this little hack for your IE
#media screen and (min-width: 0\0) {
.your-animation-parent {
transform: translate3d(0, 0, 0);
}
}
//Here is my HTML
What i need here is that on complete load of the progress bar it should redirect to another page.
any ways for that?!!!!
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="container">
<h2 class="text-center">Loading</h2>
<div class="progress">
<div class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
help me out!!
And i don't have any java script here.
i would be more happy if i can do it without java script.
so please help me out with it.
UPDATE
found that java script animation end may help out.
Simply use this trick highlighted by David Walsh. He did it for transitionend, but we can swap it out for animationend instead.
His trick is to loop through the list of all vendor-prefixed and native animationend events, and check if the browser supports any of them. He then attaches the recognized animationend handler to the element of interest.
When the animationend event is fired, we simply redirect to the URL of interest using window.location.replace(), as mentioned before.
I have modified it so it would work for your scenario:
$(function() {
// Check with animationend event is supported by browser
function whichAnimationEvent(){
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation':'animationend',
'OAnimation':'oAnimationEnd',
'MozAnimation':'animationend',
'WebkitAnimation':'webkitAnimationEnd'
}
for(t in animations){
if( el.style[t] !== undefined ){
return animations[t];
}
}
}
// Listen for animation
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
// Alert (to demonstrate the code works)
alert('Animation complete! This is the callback, no library needed!');
// Redirect script
window.location.replace('/path/to/url');
});
});
See fiddle here: http://jsfiddle.net/teddyrised/9w7pntmt/3/
ok., i found the solution completely.
if anyone have any issue with this please report.
function whichAnimationEvent() {
var t;
var el = document.createElement('fakeelement');
var animations = {
'animation': 'animationend',
'OAnimation': 'oAnimationEnd',
'MozAnimation': 'animationend',
'WebkitAnimation': 'webkitAnimationEnd'
};
for (t in animations) {
if (el.style[t] !== undefined) {
return animations[t];
}
}
}
function oload() {
var animationEvent = whichAnimationEvent(),
progress = document.getElementsByClassName('progress-bar')[0];
animationEvent && progress.addEventListener(animationEvent, function() {
window.location.replace("http://alokraj68.in");
});
}
// Listen for animation
html,
body {
height: 100%;
}
body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em"Helvetica Neue", sans-serif;
margin: 0;
position: relative;
}
h1 {
font-size: 2.25em;
font-weight: 100;
line-height: 1.2em;
margin: 0 0 1.5em;
}
.text-center {
text-align: center;
}
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
-webkit-animation-duration: 3s;
-webkit-animation-name: width;
background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
#keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-webkit-keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<html>
<head>
<meta charset="UTF-8">
<title>alokraj68.in--Loading!!</title>
<link rel="stylesheet" href="css/loading.css">
<script src="js/script.js"></script>
</head>
<body onload="oload()">
<div class="container">
<h1 class="text-center">alokraj68.in</h1>
<h2 class="text-center">Loading</h2>
<div class="progress">
<div id="pb" class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
</body>
</html>
Try this coding.
if anyone finds any issues, please tell me.