I want the progress bar to go from 0% width to 50% width in 2 seconds. This is my code so far:
<style>
#progressbar {
background-color: #000000;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
</style>
<div id="progressbar">
<div></div>
</div>
but when I open the page the width is 100% instead of 50%. what have I done wrong?
Your loadbar animation was not closed. The animation should work now. I've also added a forwards keyword to only play the animation once.
#progressbar {
background-color: black;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s normal forwards ease-in-out;
-webkit-animation:loadbar 2s normal forwards ease-in-out;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Here's a Fiddle
#progressbar div {
background-color: #0063C6;
width: 50%;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
jsFiddle demo
Set the initial width to 0%
#progressbar div {
background-color: #0063C6;
height: 10px;
width:0%; /* ADD THIS <<< */
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Additionally, I added in the following..
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
If you want the animation to end in a forwards motion you need this... here is a demo demonstrating what would happen without it.. jsFiddle here
Related
I want to show an animation of drawing an angled and straight line and to show my text from left to right when hovering over a button and I am fairly new at this. also is there a way for my text to stay and not go away after animation finishes?
Here is my code, the code is a combination of other answers from stack overflow.
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
You need to add/toggle a class on the div.skew element with Javascript, and define animation rules on that class or children of elements with that class, like so:
var button = document.querySelector("button.menubtn"); //Select the button
var skewElement = document.querySelector("div.skew"); //Select the 'skew' element
button.onmouseover = function(){
skewElement.classList.toggle("startAnimation");
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.skew.startAnimation {
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
}
.startAnimation .line {
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
opacity: 0;
position: relative;
top: -17px;
left: 15px;
}
.startAnimation .showText {
animation: showText 2s;
animation-fill-mode: forwards;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
In order to have the text visible even after animation's end, you have to specify animation-fill-mode: forwards on .showText, like I have done in the snippet above.
To get the animation done on hovering, first we have to create an event for hovering for that particular element using javascript
Then call a function when that event is triggered , for you it will be displaying some animations
Just for simplicity , i just made a parent div for your entire animation elements , and not displaying initially
Later on hovering , we change the css display property of that parent element to block which will display all of your animated elements
Also to make sure your text stays after animation , there is an animation property called forwards which will keep your final animation state for the later time
var hvrbtn=document.getElementById("hvrbtn");
hvrbtn.onmouseover=()=>{
var anim=document.getElementById("anim");
anim.style.display="block";
};
.animated{
display:none;
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s forwards;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn" id="hvrbtn">hover over me</button>
</div>
<div class="animated" id="anim">
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
<div>
I'm trying to make an animation where a picture moves to left and to the right in a loop.
By using keyframes I've achieved this, but my next step was to transform:scaleX(-1) the image instantly when the image reaches 25% and 50% and so on.. All help is appreciated!
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
<div class="container">
<div class="object"></div>
</div>
I'm not clear about how you want to use transform: scaleX(-1); in your animation, but the principle of what you are looking to achieve is definitely valid.
Essentially, my understanding is that you want to run the animation that moves your element, and at specific intervals immediately apply a transform without it being gracefully animated.
In order to achieve this, add a second animation and run it along-side the first:
animation: move 4s infinite, transformScale 4s infinite;
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
Of course, this will run exactly as the first animation, with the transition between keyframes. The solution is to use:
animation-timing-function: steps(1, end);
Which results in the animation CSS of:
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
Here's a snippet that shows it in action.
div.container {
background-color: grey;
height: 500px;
position: relative;
width: 500px;
}
div.object {
animation: move 4s infinite, transformScale 4s infinite steps(1, end);
background-color: red;
height: 150px;
left: 40px;
position: absolute;
width: 150px;
}
#keyframes move {
0% {
left: 40px;
}
25% {
left: -60px;
}
50% {
left: 40px;
}
75% {
left: -60px;
}
100% {
left: 40px;
}
}
#keyframes transformScale {
0% {
transform: scaleX(-0.25);
}
25% {
transform: scaleX(0.5);
}
50% {
transform: scaleX(-0.25);
}
75% {
transform: scaleX(0.5);
}
100% {
transform: scaleX(-0.25);
}
}
<div class="container">
<div class="object"></div>
</div>
I have created this progress bar and I just can't make it stop at the end. Currently its stopping at 70% and gets cleared. Any ideas? Is there any kind of animation setting to stop it at 100%?
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.bar {
background: #ffcc00;
height: 10px;
width: 0%;
}
.animating {
-webkit-animation: progress 3s ;
}
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
animation-fill-mode: forwards; or -webkit-animation: progress 3s forwards;
Try to use 100% in:
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%; /* edit to 100% */
}
}
A Fancy version
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.wrap div {
background-color: #ffcc00;
height: 10px;
width: 0%;
border-radius: 5px;
animation: loadbar 3s;
-webkit-animation: loadbar 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
I have this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
But I want something like this:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, translate 0.5s ease-in-out infinite alternate;
}
#keyframes rotate {
from {transform: rotate(-30deg);}
to {transform: rotate(30deg);}
}
#keyframes translate {
from {top: 10px;}
to {top: 0px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
EDIT: I probably didn't explain this well enough. What I meant is, is there a way to keep the bottom of the div touching the line witout using any sort of animation to move it up and down? I want it to be dynamic, so that if I change the value of the rotation, I won't have to calculate and change the value of the translation.
EDIT2: Simply put: I just want the div to do what the second example is doing without needing a specific value for the vertical movement.
You should play with values to get it perfect but this is the idea:
div {
position: relative;
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate;
}
#keyframes rotate {
0% {transform: rotate(-30deg); top: 10px;}
50% {top: 0px;}
100% {transform: rotate(30deg); top: 10px;}
}
hr {
position: relative;
top: -10px;
}
<div></div>
<hr>
I'm not sure that this is what do you expect, but I will give it a try.
* {
margin: 0;
padding: 0;
}
div {
width: 20px;
height: 100px;
border-radius: 10px;
background: green;
margin: 0 auto;
transform-origin: 10px 10px;
animation: rotate 1s ease-in-out infinite alternate, stretch 1s ease-in-out infinite;
}
hr {
position: absolute;
top: 99px;
width: 99%;
}
#keyframes rotate {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
#keyframes stretch {
0% {
height: 112px;
}
50% {
height: 100px;
}
100% {
height: 112px;
}
}
<div></div>
<hr>
I'm animating line with css3 from width:0 to width:100%. At the moment is moving from left to right, but I want to make it to start from right to left. Is this posible at all with keyframes?
here is my code
.content {
width: 400px;
height: 200px;
color: white;
cursor: pointer;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
background: #333;
}
.content .line {
height: 2px;
background: white;
position: absolute;
top: 10px;
-webkit-animation: dude .75s 1 forwards;
-moz-animation: dude .75s 1 forwards;
-o-animation: dude .75s 1 forwards;
animation: dude .75s 1 forwards;
}
#-webkit-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-moz-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#-o-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="content">
<div class="line"></div>
</div>
See this FIDDLE
add
.content .line {
right: 0;
}
.content {
width: 400px;
height: 200px;
color: white;
cursor: pointer;
text-transform: uppercase;
padding-bottom: 20px;
position: relative;
background: #333;
}
.content .line {
height: 2px;
background: white;
position: absolute;
top: 10px;
right: 0;
-webkit-animation: dude .75s 1 forwards;
animation: dude .75s 1 forwards;
}
#-webkit-keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
#keyframes dude {
0% {
width: 0;
}
100% {
width: 100%;
}
}
<div class="content">
<div class="line"></div>
</div>
Try to animate "left" property instead of width as your element already has position set to absolute.
#keyframes dude {
0% {
left: 100%;
}
100% {
left: 0;
}
}
FIDDLE
change animation-direction to reverse
animation: dude .75s 1 reverse;