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;
Related
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>
I am trying to slide div in after 1 second and slide it out after 4 seconds exactly the same way. is it possible?
The second problem is, that the black div(second div), disappears after the animation.
.first {
width: 100px;
height: 100px;
background: red;
animation-name: example;
animation-duration: 2s;
}
.second {
width: 0;
height: 100px;
background: black;
margin-top: -100px;
margin-left: 100px;
animation-name: example2;
animation-delay: 2s;
animation-duration: 2s;
}
#keyframes example {
from {
margin-left: -200px
}
to {
margin-left: 0px
}
}
#keyframes example2 {
from {
width: 0px
}
to {
width: 250px
}
}
<div class="first"></div>
<div class="second"></div>
JSFiddle
if you use percentages you can do what you want.
You can define your animation just as you like.
#keyframes example {
0%, 100% {
margin-left: -200px
}
10%, 90% {
margin-left: 0px
}
}
set the animation delay to 1s.
you need to experiment with the percentages for your need
The second div is going to its original state after the animation.
This will set the css stile after the animation is over
animation-fill-mode: forwards;
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 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