I want to make a loading bar with a divgoing from the left to the right.
Actually the div is doing nothing.
No error messages in console.
I've tried to put the keyframes declaration at the begining of the file but it's still not working.
Here is my code:
#keyframes loading {
from {
margin-left: 0px;
}
to {
margin-left: 90px;
}
}
#loading-bar {
width: 100px;
height: 5px;
background-color: lightgray;
}
#loading-bar > div {
width: 10px;
height: 5px;
background-color: cornflowerblue;
animation: 3s linear 0 loading;
}
<div id="loading-bar">
<div></div>
</div>
Try the below changes in your code. Replace animation: 3s linear 0 loading with animation: loading 3s normal forwards.
Working code:
#keyframes loading {
from {
margin-left: 0px;
}
to {
margin-left: 90px;
}
}
#loading-bar {
width: 100px;
height: 5px;
background-color: lightgray;
}
#loading-bar>div {
width: 10px;
height: 5px;
background-color: cornflowerblue;
animation: loading 3s normal forwards;
}
<div id="loading-bar">
<div></div>
</div>
Related
I want to make two-step progress bar animation: the red bar run to the middle and its color is turned to yellow, then another yellow bar will appear in the middle and runs to the end.
I tried to add "display: none" in class progressbar2 but it will disappear in the beginning. How can I do to make yellow bar (class:progressbar2) appear after 2 seconds and it doesn't appear in the beginning?
Here is codepen code
.container1 {
position: relative;
width: 100%;
margin-top: 10px;
}
.progress1 {
height: 10px;
width: 50%;
background-color: yellow;
border-radius: 2px;
animation: becomeyellow 2s linear;
display: flex;
float: left;
}
.progress2 {
height: 10px;
width: 50%;
position: absolute;
left: 50%;
background-color: green;
border-radius: 2px;
animation: becomegreen 2s 2s linear;
}
#keyframes becomeyellow {
0% {
width: 0%;
background-color: red;
}
100% {
width: 50%;
background-color: yellow;
}
}
#keyframes becomegreen {
0% {
width: 0%;
background-color: yellow;
display: none;
}
100% {
width: 50%;
background-color: green;
}
}
<div class="container1">
<div class="progress1"></div>
<div class="progress2"></div>
</div>
I added opacity:0 in the progress2 class at the last line.
And on the animation becomegreen I added opacity:1 when you're setting 100% of the animation.
And that worked very well.
I'm trying to make this div move smoothly while changing colors, but the problem is that right before it should transition into the #bad455 color, it stops briefly.
So I was wondering are there any ways to make it go smoothly without no stopping?
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 20px;
}
100% {
background-color: #bad455;
margin-top: 30px;
}
}
<div></div>
You set the iteration count to infinite so your animation keeps going and set the margin of your last keyframe back to 0 so it returns to it's default state.
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 30px;
}
100% {
background-color: #bad455;
margin-top: 0px;
}
}
<div></div>
Try this in your div tag:
-webkit-transition: width 2s;
transition: width 2s;
Can I flash a div using only CSS? I would like this div to flash two colors.
.chat-window .msg-container-base .notification-message-unread{
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
}
Here you go:
.notification-message-unread {
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
display: block;
position: relative;
width: 200px;
height: 200px;
background-color: red;
animation: blinker 1s linear infinite;
}
#keyframes blinker {
50% {
background-color: blue;
}
}
<div class="notification-message-unread"></div>
For this you can use CSS keyframe animations.
.box {
height: 500px;
width: 500px;
animation: animationFrames 5s infinite;
}
#keyframes animationFrames{
0% {
background-color: blue;
}
15% {
background-color: red;
}
30% {
background-color: orange;
}
45% {
background-color: purple;
}
60% {
background-color: green;
}
75% {
background-color: pink;
}
100% {
background-color: black;
}
}
<div class="box"></div>
In the .box class I'm using the animation property to link to an animation keyframe called animationFrames. I'm also defining how long I want this animation to play for, in the example above it's 5s and set to infinite so it repeats forever. The keyframe portion sets what CSS you want to apply to the animation at what percent in the animation, for example at 15% of 5 seconds it will turn red.
You can learn more about CSS keyframe animations here and here.
As per your specific example this code should work (I added a height property just so you could see it)
.chat-window {
float: right;
font-size: 10px;
color: #666;
background: white;
padding-left: 10px;
animation: animationFrames 2s infinite;
height: 500px;
}
#keyframes animationFrames{
50% {
background-color: orange;
}
}
<div class="chat-window"></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 the following code to have text slide in, but after the slide is over the text moves to the left. How would I make the text stay where it is when the slide is over?
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
}
#keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>
You need to use animation-fill-mode: forwards to preserve the last animation state. Since there was no animation-fill-mode specified, it used the default properties of the class name, i.e. resets/jumps to the top value specified after the animation is completed.
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
animation-fill-mode: forwards;
}
#keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>