This is a relatively simple question but I can't seem to see what I'm doing wrong here. I just want the ball to change from red, to blue, to yellow at the 0%, %50, and %100 mark. Currently I'm not seeing any changes.
Thanks for your help,
Anna
#ball {
background-color: red;
height: 50px;
width:50px;
border-radius: 50%;
animation-name: ball;
animation-duration: 4s;
#keyframes ball{
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
}
<html>
<body>
<div id="ball">
</div>
</body>
</html>
Move #keyframes out of your ball styles (unless you use a CSS preprocessor like SASS...)
#ball {
background-color: red;
height: 50px;
width: 50px;
border-radius: 50%;
animation-name: ball;
animation-duration: 4s;
}
#keyframes ball {
0% {
background-color: red;
}
50% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
<div id="ball"></div>
Whilst using SCSS instead, you can: jsFiddle example
Related
I'm trying to load the progress bar up to a certain percentage. Whatever that percentage is, the progress bar will stop at that specific color animation specified in the keyframes.
How can i get it to work.
HTML
<div class="container">
<div class="progress-bar">
<span style="width:50%">
<span class="progress-value"></span>
</span>
</div>
<span><strong>CSS</strong></span>
<br/>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
.progress-bar {
background-color: lightgray;
border-radius: 1.25em;
width: 300px;
height: 16px;
width: 50vw;
}
.progress-bar > span {
display: flex;
}
.progress-value {
background-color: #673ab7;
transition: 0.3s all linear;
border-radius: 1.25em;
height: 16px;
width: 50vw;
animation: progress-color 3s linear forwards;
-webkit-animation: progress-color 3s linear forwards;
}
/* animation */
#keyframes progress-color {
0% {
width: 0;
}
50% {
width: 30%;
background: purple;
}
100% {
background: green;
width: 100%;
}
}
#-webkit-keyframes progress-color {
0% {
width: 0;
}
50% {
width: 30%;
background:red;
}
100% {
background: green;
width: 100%;
}
}
Here's my codepen
https://codepen.io/mingsterism/pen/xJgePK
The problem is that where you have specified the animation is 100% completed under the #keyframes , there you must specify red as the color, which you have specified as the color you wish when the bar reaches 50%, while the rest of of the code is fine. Replace your piece of code with this one below and tell, is this what you want ?
#keyframes progress-color {
0% {
width: 0;
}
50% {
width: 30%;
background: green;
}
100% {
background: red;
width: 100%;
}
}
#-webkit-keyframes progress-color {
0% {
width: 0;
}
50% {
width: 30%;
background: green;
}
100% {
background: red;
width: 100%;
}
}
This is the only thing I could think of.
#div {
height: 20px;
width: 20px;
background-color: black;
transition: 1s;
}
#div:hover {
background-color: red;
}
#div:hover {
transition-delay: 2s;
background-color: blue;
}
<div id="div">
</div>
It'll instead ignore the first #div:hover
EDIT:
Alright this seemed to work.
#div:hover {
animation: fade 3s forwards;
}
#keyframes fade {
0%, 66% {background-color: red}
100% {background-color: blue}
}
but how do I make it fade out in reverse?
You can achieve with animation.
#div {
height: 20px;
width: 20px;
background-color: black;
}
#div:hover {
background-color: blue;
animation: delayed 4s forwards;
}
#keyframes delayed {
0% {
background-color: red;
}
50% {
background-color: red;
}
51% {
background-color: blue;
}
100% {
background-color: blue;
}
}
<div id="div">
</div>
The second :hover is overwriting the first and the transition-delay will always be 2 seconds.
I guess you'll need to create an animation for that:
#div {
height: 20px;
width: 20px;
background-color: black;
}
#div:hover {
animation: redtoblue 3s;
animation-fill-mode: forwards;
}
#keyframes redtoblue{
0%, 65.9%{
background-color: red;
}
66%, 100%{
background-color: blue;
}
}
<div id="div">
</div>
I need to make progressive bar similar to this:
https://dribbble.com/shots/1664914-Onboarding-Progress-Steps?list=searches&tag=onboarding&offset=31
I have tried till this point: Codepen Link
CSS
body{
background-color: #34495e;
}
.mail{
border: 1px solid #d35400;
border-radius: 50%;
border-width: 50%;
float: left;
background-color: #d35400;
color: white;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #16a085;
}
.navbar-inverse{
background-color: #1abc9c;
}.icon-bar {
width: 90px;
background-color: #555;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
background-color: #34495e;
}
.same{
float: left;
font-size: 32px;
}
.icon-bar a:hover {
color: #1abc9c;
}
.active {
color: #1abc9c !important;
}
.header{
color: white;
background-color: #34495e;
margin-left: 2%;
}
.fs1 {
font-size: 32px;
}
.container{
width: 100%;
}
.progressionbar li{
list-style-type: none;
width: 33.33%;
float: left;
position: relative;
}
.progressionbar li >span{
width: 20%;
height:30%;
border:2px solid transparent;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
padding: 5%;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;
}
.progressionbar li:after{
content: '';
position: absolute;
width: 100%;
height: 6px;
background-color: #9b59b6;
top: 35%;
left: -50%;
z-index: -1;
}
.first{
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay:2s;
}
.first{
animation-duration: 2s;
animation-name: example;
animation-iteration-count: 1;
}
.second{
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 6s;
}
.second{
animation-duration: 2s;
animation-name: example;
animation-iteration-count: 1;
}
.third{
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 8s;
}
.third{
animation-duration: 2s;
animation-name: example;
animation-iteration-count: 1;
}
#-webkit-keyframes example {
from {background-color: white;}
to {background-color: #9b59b6;}
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.progressionbar li:first-child:after{
content: none;
left: -50%;
}
HTML
<html><body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<a style="background-color: #34495e" class="navbar-brand active" href="#"><span class="icon-brand same"></span></a>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
Rupam Verma<b class="caret"></b>
<ul class="dropdown-menu">
<li><h1 class="mail">R</h1><h5>Rupam varma</h5><br><h5 style="float: right;"><a href="https://plus.google.com/u/0/105904544623478465796"> mahi.roops#gmail.com</h5></li>
</ul>
</div>
</nav></a></li></ul></li></ul></div></nav>
<div class="row">
<div class="col-md-12">
<h3 class="header">Menu</h3></div>
<div class="col-md-1">
<div class="icon-bar">
<a class="active" href="#"><span class="icon-circle"></span></a>
<span class="icon-toggle-off"></span></i>
<span class="icon-checklist"></span></div></div>
<div class="col-md-11">
<div class="progressionbar">
<ul class="">
<div class="fs1">
<li><span class="icon-gift first"></span><h3 style="text-align: center">gift</h3></li>
<li><span class="icon-truck2 second"> </span><h3 style="text-align: center;"> car</h3></li>
<li> <span class="icon-profile-male third"></span><h3 style="text-align: center;"> user</h3></li>
</div>
</ul>
</div></div></div></div>
</body>
</html>
I really don't know how to achieve such a thing exactly since This has to be done only through css3 and no JS.
This timer and zoom-in zoom-out is my issue. Also, its not repeating.
Any help would be greatly appreciated, thanks.
Ok so the answer is actually simple for the delays.
FOR THE DELAYS:
You can see a fiddle here showing the solution.
CSS3 got no delay between animation loops, only for the first one. But a quick search on CSS trick show you how to do that.
The idea is to create more keyframes to make the delay.
#-webkit-keyframes example3 {
0% {
transform: scale(1);
opacity: 1;
background-color: white;
}
59% {
transform: scale(1);
opacity: 1;
background-color: white;
}
60% {
transform: scale(0.1);
opacity: 0;
background-color: white;
}
72% {
transform: scale(1.2);
opacity: 1;
}
80% {
transform: scale(1);
background-color: #9b59b6;
}
100% {
transform: scale(1);
background-color: #9b59b6;
}
}
Here is the code for an animation during 10 seconds. You can notice that nothing happens for the 6 first seconds because we want to delay it of 6 seconds each loop (third button for your case).
After that, we do the animation during the time we wnat, here 2secondes, ie 20%, and we let the final state untill 100%.
The 59% - 60% weird stuff happends because you want an abrupt change at the start of the animation. It's not always necessary.
Consequently, your problem is only a basic math problem afterall, just calculate when do you have to wait for each animation etc.. I did it for you for the 3 buttons so you can see the result.
FOR THE PROGRESSIVE BAR :
The strategy should be the same than before. Just create another bar with a background color #9b59b6, and make the width change with the percentage, soemtimes waiting 2sec at a certain width for a "button" animation going on before continuing its way, and the work is done!
In your case, you decided to make the progressive bar with after, and not an absolute one, so it is in two parts etc etc..
What I suggest you is to just create a absolute positionned one with the right background color which will recover the ":after" ones, makes it normal width to 0%, and make it grow with animation just like I explained.
Why didn't I do it ? Well you have the strategy now and I am too lazy to position it perfectly. And it's your work at the end.. It will always be better for you if you practice on the progress bar rather than copy paste my code.
i would go on 2 animation.
one to draw the progress line (as a background)
a second for the poping circle (flex children)
/* keyframes for animation */
#keyframes run {
to {
background-size:10000% 5px
}
}
#keyframes popup {
65% {
transform:scale(1.4)
}
60%, 100% {
background:purple;
transform:scale(1)
}
}
/* call and delay animations */
.progress span {
animation:popup 0.5s forwards;
}
.progress span:nth-child(2){
animation-delay:1.25s;
}
.progress span:nth-child(3){
animation-delay:2.75s;
}
.progress {
animation:run 3s linear forwards;
}
/* styling */
.progress {
background:linear-gradient(to right, purple 1%, white 1%) rgb(52, 73, 94) no-repeat left center; /* to animate via keyframes */
display:flex;
justify-content:space-between;
margin:1em 2em;
background-size: 100% 3px;
}
.progress span {
display:flex;
align-items:center;
justify-content:center;
box-shadow:2px 2px 5px black;
width:80px;
height:80px;
background:white;
border-radius:100%;
color:white;
font-size:30px;
}
body {background:rgb(52, 73, 94)}
<p class="progress">
<span>1</span>
<span>2</span>
<span>3</span>
</p>
pen to play with
I try to animate two blocks with css animation. Its have the same transform animation but one of it has background-color animation also. This animations splitted to two #keyframes.
See code (https://codepen.io/mctep/pen/Rgyaep):
<style>
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
</style>
<div class="a"></div>
<div class="b"></div>
Animation of colored block is lag from gray block In Google Chrome. In Safary and FF it works perfectly.
I can to make one #keyframes for background and other for transform and it solves problem. But I want to use single value of animation property for single element. If there are no any ways to fix it I'll separate moving and coloring animations.
Why this happens? Is it Google Chrome bug?
Couldn't give you a concrete reason why this happens, but we can un-confuse Chrome by simply specifying a background-color in animation B as well.
#keyframes b {
0% {
background-color: gray; /* add this */
transform: translateX(0);
}
}
.a {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: red;
animation: a 1s infinite;
}
.b {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background-color: gray;
animation: b 1s infinite;
}
#keyframes a {
0% {
background-color: red;
transform: translateX(0);
}
50% {
background-color: green;
transform: translateX(100px);
}
100% {
background: red;
}
}
#keyframes b {
0% {
background-color: gray;
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
}
<div class="a"></div>
<div class="b"></div>
I have a pretty specific rendering issue I came across. When doing a css transition on a transform property, the direct parent is dimming during the transition, even though the opacity is not being changed. This only happens in Chrome, not Safari or Firefox, and I'm on a mac.
Has anyone seen this issue or have any thoughts?
$('#toggle').click(function(e){
$('#bar').toggleClass('on');
});
body {
background: #222;
}
#bar {
background: #999;
opacity: .5;
height: 4px;
border-radius: 2px;
width: 300px;
margin: 30px 5px;
}
#inner {
background: #ee2f51;
height: 4px;
border-radius: 2px;
width: 1px;
transition: all 1s;
transform-origin: left;
transform: scaleX(100);
}
.on #inner{
transform: scaleX(300);
}
/*
//option pulse animation
#bar.on {
animation: pulse 1s ease-in-out;
}
#keyframes pulse {
0% {
opacity: .5;
}
50% {
opacity: 1;
}
100% {
opacity: .5;
}
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="bar">
<div id="inner"></div>
</div>
</div>
<button id="toggle">
toggle bar
</button>
If you remove opacity: 0.5 from #bar the problem goes away, but your colors are different. This version works fine on all browsers, but you'll have to tweak the rgba to your liking.
$('#toggle').click(function(e){
$('#bar').toggleClass('on');
});
body {
background: #222;
}
#bar {
background: rgba(153, 153, 153,0.65);
height: 4px;
border-radius: 2px;
width: 300px;
margin: 30px 5px;
}
#inner {
background: rgba(193, 16, 47, 0.65);
height: 4px;
border-radius: 2px;
width: 1px;
transition: all 1s;
transform-origin: left;
transform: scaleX(100);
}
.on #inner {
transform: scaleX(300);
}
/*
//option pulse animation
#bar.on {
animation: pulse 1s ease-in-out;
}
#keyframes pulse {
0% {
opacity: .5;
}
50% {
opacity: 1;
}
100% {
opacity: .5;
}
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="bar">
<div id="inner"></div>
</div>
</div>
<button id="toggle">
toggle bar
</button>