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.
Related
I made a sort of header with an animated information banner (on 3 lines)
starting at each end. (ex: for the 1st and 3rd line, from left to right and for the 2nd line from right to left). What I would like is to take a break of a few seconds when the 3 bands are
all aligned (in the center) then continue the animation.
I would prefer a solution without using javascript but unfortunately I think it seems impossible?
Problem: The 1st and 3rd banner always start to appear before the 2nd and therefore when they are aligned, they are never in the center.
<!DOCTYPE html>
<HTML>
<head>
<title> VIDEO LIBRARY </title>
<meta charset="utf-8"/>
<style type="text/css">
.bandeau
{
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26,133,230);
}
#keyframes defilement {
from {
left: 0;
}
to {
left: 1000px;
}
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top:0;
right:0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite ;
}
</style>
</head>
<body>
<div class="bandeau" >
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
</body>
</HTML>
Instead of using from and to in your keyframes, you can set steps using percentages.
In the code below, from 0% to 45% of animation, the animation moves from 0 to 500px. Then from 45 - 55% it stays at 500px (i.e. pauses). Then from 55 - 100% it moves from 500 - 1000px:
#keyframes defilement {
0% {left: 0;}
45% {left: 500px;}
55% {left: 500px;}
100% {left: 1000px;}
}
Responsive solution: blocks will stop in the centre an any size screen.
If you do not have fixed width and would like a more responsive way to calculate the midpoint, you can use percentages: Start at 0%, end at 100%, then 50% for the centre.
However if you position the left of the block at the very centre, it will be a bit too far right. The correct position for the left of the block is actually 50% - 125px (half of the width of the div). And we can actually use using the CSS calc function to do this!
Also to make all blocks appear at the same time, we need to change the starting point for -250px so the 3 blocks all start off the screen and then slide in together.
#keyframes defilement {
0% { left: -250px;}
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%;}
}
Working example:
.bandeau {
height: 120px;
width: 100%;
padding-top: 5px;
border-radius: 25px;
background: rgb(26, 133, 230);
}
#keyframes defilement {
0% { left: -250px; }
45% { left: calc(50% - 125px); }
55% { left: calc(50% - 125px); }
100% { left: 100%; }
}
.defil {
margin: 10px;
position: relative;
height: 20px;
background-color: black;
border: 1px solid black;
overflow: hidden;
text-align: center;
}
.defil div {
position: absolute;
top: 0;
width: 250px;
height: 20px;
background-color: blue;
opacity: 1;
}
.ex1 div {
animation: defilement 20s linear infinite;
}
.ex2 div {
top: 0;
right: 0;
background-color: white;
animation: defilement 20s linear infinite reverse;
}
.ex3 div {
background-color: red;
animation: defilement 20s linear infinite;
}
<div class="bandeau">
<div class="defil ex1">
<div>MANAGEMENT</div>
</div>
<div class="defil ex2">
<div>OF MY</div>
</div>
<div class="defil ex3">
<div>VIDEO LIBRARY</div>
</div>
</div>
For more information on keyframes, take a look at Mozilla MDN Docs for CSS3 Keyframes
I have a few divs on my view which need to be animated.
I created some CSS like this:
.pk-image-container {
position: relative;
height: 625px;
.animate-hide {
position: absolute;
left: 0;
opacity: 1;
transition: all ease 1s;
height: 625px;
width: 100%;
&.ng-hide {
left: -100%;
opacity: 0;
}
}
}
The view looks like this:
<div class="pk-image-container" ng-if="!multiple">
<div class="animate-hide" ng-repeat="answer in question.answers track by $index" ng-hide="$index !== currentSlide"></div>
</div>
So far that gives me a sliding effect fading in from the left and then fading out to the left.
But I want to do something a little better.
I would like the active item to fade in from the left, but the inactive one to fade out to the right.
Can this be done using ng-hide or animate.css?
You could use an additional class of .active on your items and set left: 0.
Otherwise, you can set all items to left: 100%.
To set the class, you can use ng-class.
CSS:
.pk-image-container {
position: relative;
height: 625px;
.animate-hide {
position: absolute;
left: 100%;
opacity: 1;
transition: all ease 1s;
height: 625px;
width: 100%;
&.ng-hide {
left: -100%;
opacity: 0;
}
&.active {
left: 0;
}
}
}
HTML:
<div class="pk-image-container" ng-if="!multiple">
<div ng-class="[animate-hide, {'active': $index === currentSlide}]" ng-repeat="answer in question.answers track by $index" ng-hide="$index !== currentSlide"></div>
</div>
I found a better way of doing it.
I used ngAnimate and I did it like this:
.pk-image-container {
position: relative;
height: 625px;
.slide {
position: absolute;
left: 0;
width: 100%;
height: 625px;
}
.slide.ng-enter {
transition: 0.3s linear all;
left: 100%;
}
/* The finishing CSS styles for the enter animation */
.slide.ng-enter.ng-enter-active {
left: 0;
}
/* now the element will fade out before it is removed from the DOM */
.slide.ng-leave {
transition: 0.3s linear all;
}
.slide.ng-leave.ng-leave-active {
left: -100%;
}
}
and updated the HTML to this:
<div class="pk-image-container" ng-if="!multiple">
<div class="slide" ng-repeat="answer in question.answers track by $index" ng-if="$index === currentSlide"></div>
</div>
Please consider following example.
Div which is the shape of ball does move but its sudden movement rather I want it to transition diagonally across the page to the bottom right corner. Why isn't that happening? What did I miss?
.one {
background: green;
height: 100px;
width: 100px;
position: absolute;
border-radius: 100px;
transition: all 1s ease;
}
.one:hover {
background: red;
bottom: 0px;
right: 0px;
}
<div class="one"></div>
For transition to happen, you need values on both the parent and hover element selectior.
Here i just added proper values to both the selectors , and by subtracting their heights easily.
.one {
background: green;
height: 100px;
width: 100px;
position: absolute;
border-radius: 100px;
transition: all 1s ease;
top: 0%;
left: 0%;
}
.one:hover {
background: red;
top: calc(100% - 100px);
left: calc(100% - 100px);
}
<div class="one"></div>
These will work with most modern browsers . Also you can use pollyfill to make it work with backward browsers
For transition to happen, you need values on both the selectors.
Here in your case, the parent selector did not have any values of bottom or of left, but if you look at my code, both the parent and hover selectors have top and left value.
We just need to specify value so browser knows that where to start from
you can try by giving these to hover state
top:100%;
left:100%;
margin-top:-100px;
margin-left:-100px;
check the codepen here http://codepen.io/raomarif/pen/RGNpNm?editors=1100
Just to give you an more complex example which does the transition on hover but continues it no matter where the mouse is + is reversible.
var toggleClass = true;
var totalSeconds = 0;
var transitionTime = 1000; /* In milliseconds */
function mouseOver(element) {
if (totalSeconds === 0) {
var myTimer = setInterval(function() {
countTime()
}, 100);
}
function countTime() {
++totalSeconds;
console.log(totalSeconds);
if (totalSeconds >= (transitionTime / 100)) {
stopTime();
totalSeconds = 0;
toggleClass = true;
} else {
toggleClass = false;
}
}
if (toggleClass) {
element.classList.toggle('moved');
}
function stopTime() {
clearInterval(myTimer);
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.one {
position: absolute;
background: green;
height: 100px;
width: 100px;
top: 0;
left: 0;
border-radius: 100px;
transition: all 1000ms ease-in-out;
}
.one.moved {
top: 100%;
left: 100%;
margin-top: -100px;
margin-left: -100px;
transition: all 1000ms ease-in-out;
}
<div class="one" onmouseover="mouseOver(this)"></div>
This example requires Javascript. There's some checks to see if the transition is complete so hovering the circle again won't reverse the transition etc.
JSFiddle to play around with
I have created a simple loader with css. It works fine in chrome but nor working in firefox.
https://jsfiddle.net/sunilmadaan07/4dcaLegc/
Code is as below:
HTML:
<div class='container'>
<div class='loader'>
<div class='loader--text'></div>
</div>
</div>
Content animation not working in most of all browser. You can do following using plugins.
$("#randomArea").Loadingdotdotdot({
"speed": 400,
"maxDots": 5,
"word": "Loading"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/Loadingdotdotdot/js/jquery.loadingdotdotdot.js"></script>
<div id="randomArea" style="position: relative;">done!</div>
Reference Link
Hey you can achieve the effect using plain JS but i have used jQuery..
jQUERY
// Simpler, does exactly the same thing:
var i=1;
var txt="Loading";
function go () {
console.log(i);
$('.loader--text').text(txt);
i++;
txt+=".";
if(i==5)
{
txt="Loading";
i=1;
}
setTimeout(go,1000);
}
go();
JSFIDDLE Link:
https://jsfiddle.net/4dcaLegc/5/
The problem is animation with :after pseudo is not supporting in Firefox, thats why I change some of your code a litter from content to width on parent element.
Check below snippet:
.container {
height: 100vh;
width: 100vw;
font-family: Helvetica;
}
.loader {
height: 20px;
width: 80px;
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loader-text {
position: absolute;
top: 500%;
left: 0;
right: 0;
width:64px;
overflow:hidden;
animation: loadertext 3s infinite;
-moz-animation:loadertext 3s infinite;
}
#-moz-keyframes loadertext {
0% {
width:64px;
}
35% {
width:68px;
}
60% {
width:72px;
}
100% {
width:75px;
}
}
#keyframes loadertext {
0% {
width:64px;
}
35% {
width:68px;
}
60% {
width:72px;
}
100% {
width:75px;
}
}
.loader-text:after {
content: "Loading...";
font-weight: bold;
display:block;
}
<div class='container'>
<div class='loader'>
<div class='loader-text'></div>
</div>
</div>
//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.