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.
Related
I am very new to this and trying to animate my "rd" class but I can not figure out why it is not animating.
My final goal is when I scroll down to next page the items on the first page will fade out.
I would appreciate any help.
here what I got so far:
Codepen
.rd {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
overflow: visible;
height: 100%;
opacity: 100%;
animation: RD 5s infinite;
}
#keyframes rd {
0% {
left: 0px; opacity:100%;
}
50% {
left: 200px; opacity:0%;
}
100% {
left: 0px; opacity:100%;
}
}
.crown {
height: 200px;
}
.heart {
position: relative;
transform: rotateZ(45deg);
animation: heart 1s infinite;
margin-top: -50px;
}
#keyframes heart {
0% {
height: 100px;
width: 100px;
}
50% {
height: 50px;
width: 50px;
}
100% {
height: 100px;
width: 100px;
}
}
<div id="fullpage">
<section class="vertical-scrolling">
<div class="rd">
<img class="crown" src="https://m.media-amazon.com/images/I/6176t0uwOEL._SL1200_.jpg" alt="crown" />
<img class="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1920px-Heart_coraz%C3%B3n.svg.png">
</d>
</div>
</section>
</div>
There are two small things you are missing.
Both are in your .rd class properties
animation: RD 5s infinite;
Your keyframe is named rd with small letters, in your animation property you are using RD with uppercase letters. Both need to match, so either both lower case or uppercase
-> animation: rd 5s infinite;
left property needs position: relative | absolute
Your animation is doing a "left" position change. In order to change positions (top | left | bottom | right), your element need to be position: relative or position: absolute
In your case relative is enough
.rd {
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
overflow: visible;
height: 100%;
opacity: 100%;
animation: rd 5s infinite;
position: relative;
}
#keyframes rd {
0% {
left: 0px;
}
50% {
left: 200px;
}
100% {
left: 0px;
}
}
.crown {
height: 200px;
}
.heart {
position: relative;
transform: rotateZ(45deg);
animation: heart 1s infinite;
margin-top: -50px;
}
#keyframes heart {
0% {
height: 100px;
width: 100px;
}
50% {
height: 50px;
width: 50px;
}
100% {
height: 100px;
width: 100px;
}
}
<div id="fullpage">
<section class="vertical-scrolling">
<div class="rd">
<img class="crown" src="https://m.media-amazon.com/images/I/6176t0uwOEL._SL1200_.jpg" alt="crown" />
<img class="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1920px-Heart_coraz%C3%B3n.svg.png">
</d>
</div>
</section>
</div>
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 am trying to stagger the opacity (fade) of three boxes via an infinite keyframe animation and the animation-delay property.
I am getting some unexpected behavior, as the third box fades away, it suddenly reappears faintly ("flickers") before the animation starts again. I am experiencing this across browsers.
I would like to use pseudo elements if possible, is there a known fix for this keyframe bug?
HTML
<div class="container">
<div class="child">
<div></div>
</div>
</div>
SCSS
.container {
position: fixed;
left: 150px;
top: 50px;
.child {
position: absolute;
animation:mymove 1s infinite;
&::before{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: inherit;
animation-delay: .15s;
}
div {
width: 25px;
height: 25px;
background-color: red;
animation: inherit;
animation-delay: .30s;
}
&::after{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: inherit;
animation-delay: .45s;
}
}
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
JS Fiddle
The reason they flicker is because you have set an animation on their parent, the child.
And since its animation doesn't have a delay, it starts before its children, but will then be overridden by them as soon as their delay has passed, hence one can see a quick flash.
The best way to avoid any future issue with this, is to remove the animation from the child
.container {
position: fixed;
left: 150px;
top: 50px;
}
.container .child {
position: absolute;
}
.container .child::before {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: mymove 1s infinite;
animation-delay: 0.15s;
}
.container .child div {
width: 25px;
height: 25px;
background-color: red;
animation: mymove 1s infinite;
animation-delay: 0.3s;
}
.container .child::after {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: mymove 1s infinite;
animation-delay: 0.45s;
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="container">
<div class="child">
<div></div>
</div>
</div>
I want to have an expanding radius that starts from the center of the div instead of it starting on the top left of the div.
Imagine the button has a pulsing outline that goes outwards. That pulsing outline should start from the middle of the div and go out.
See example here: https://jsbin.com/dinehoqaro/edit?html,css,output
You can see that the expansion is starting from the top left.
.circle {
background-color: white;
border: 1px solid red;
border-radius: 50%;
width: 50px;
height: 50px;
animation: pulse 1s infinte;
-webkit-animation: pulse 1.2s infinite;
}
button {
background-color: green;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
}
#-webkit-keyframes pulse {
from {
width: 50px;
height: 50px;
}
to {
width: 100px height: 100px;
}
}
#keyframes pulse {
from {
width: 50px;
height: 50px;
}
to {
width: 100px;
height: 100px;
}
}
<div class="circle"><button>click here</button></div>
Here's a general solution using CSS flexbox, transform and pseudo-elements.
body {
display: flex;
align-items: center;
justify-content: center;
background-color: lightyellow;
height: 100vh;
margin: 0;
}
#container {
display: flex;
align-items: center;
justify-content: center;
}
.sphere {
display: flex;
background: lightblue;
border-radius: 300px;
height: 100px;
width: 100px;
}
#container::after {
display: flex;
background: lightpink;
border-radius: 300px;
height: 250px;
width: 250px;
animation: pulsate 2.5s ease-out;
animation-iteration-count: infinite;
opacity: 0.0;
content: "";
z-index: -1;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
opacity: 0.0;
}
50% {
opacity: 1.0;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0.0;
}
}
<div id="container">
<div class="sphere"></div>
</div>
jsFiddle
Also see this awesome solution by #harry: How to create a pulsing glow ring animation in CSS?