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
Related
I'm trying to animate the second part of the sentence to change words. div box is the non-changing part, and div word is the changing part. Even though in every guide I've read, it says defining position as absolute and hiding overflow will fix the starting position of second part of the sentence, it still keeps changing. Here's my CSS:
body
{
margin: 0;
padding: 0;
background: #B4B8AB;
}
.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-family: arial;
color: #fff;
margin-left: 150px;
width: calc(100% - 50px)
text-shadow: 0 2px 2px rgba(0,0,0,.5);
}
.word
{
display: inline-block;
color: #e65c00;
}
.word span
{
position: aboslute;
top: 0;
overflow: hidden;
animation: animate 12s linear infinite 0s;
opacity: 0;
}
#keyframes animate
{
0%
{
opacity: 0;
transform: translateY(-50px);
}
2%
{
opacity: 1;
transform: translateY(0px);
}
15%
{
opacity: 1;
transform: translateY(0px);
}
20%
{
opacity: 0;
transform: translateY(50px);
}
80%
{
opacity: 0;
transform: translateY(50px);
}
100%
{
opacity: 0;
transform: translateY(50px);
}
}
.word span:nth-child(1)
{
animation-delay: 0s;
}
.word span:nth-child(2)
{
animation-delay: 2s;
}
.word span:nth-child(3)
{
animation-delay: 4s;
}
.word span:nth-child(4)
{
animation-delay: 6s;
}
.word span:nth-child(5)
{
animation-delay: 8s;
}
.word span:nth-child(6)
{
animation-delay: 10s;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tickets</title>
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<div id="menu">
<div class="logo">
<nav>
<img src="../images/mylogo.png" height="30" width="156" />
</nav>
</div>
</div>
<div class="box">
Sick of
<div class="word">
<span>wasting your time and money?</span>
<span>unreliable Ubers?</span>
<span>being stuck in traffic?</span>
<span>waiting in line?</span>
<span>sold out tickets?</span>
<span>logistical nightmares?</span>
</div>
</div>
</body>
</html>
Found the error on line 26 in the CSS
position: aboslute;
Change it to absolute and you are good to go ;)
Fiddle example here
Also, very cool effect!
New request
Figured it out. There was a missing ;
.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-family: arial;
color: #fff;
margin-left: 150px;
width: calc(100% - 50px); /* <--- Right here */
text-shadow: 0px 2px 2px rgba(0,0,0,.5);
}
New Fiddle example here
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>
Can someone give me an idea how to colorate the circles behind the airplaine??
Please check this jsfiddle link below
Code:
.main {
display: flex;
position:relative;
border: 1px solid green;
margin: 100px;
overflow:hidden;
}
.plane, .item {
width: 50px;
height: 50px;
display:flex;
align-items: center;
justify-content: center;
}
.item {
margin: 0 5px;
}
.plane {
position:absolute;
-webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 3s infinite;
}
.fa-circle {
font-size:10px;
}
.fa-plane {
transform: rotate(45deg);
color:red;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 420px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 420px;}
}
#-webkit-keyframes coloration {
from {color: orange;}
to {color: green;}
}
#keyframes coloration {
from {color: orange;}
to {color: green;}
}
Link: https://jsfiddle.net/b3r51n6z/4/
I want to colorate every circle passed by the plane icone to orange
Here is one way, where I made a change to your markup and then used one pseudo element to create the circles and the other to do the coloration.
The circle is created using a border radius and a box shadow to get a transparent circle (cut-out) and then one stretch the orange colored pseudo behind.
.main {
display: flex;
position:relative;
border: 1px solid green;
margin: 100px;
overflow:hidden;
background: black;
}
.main::before{
content:'';
position:absolute;
left: 0;
top: 0;
width: 120%;
height:100%;
background: orange;
transform: scaleX(0);
transform-origin: left center;
animation: coloration 3s infinite;
}
.plane, .item {
position:relative;
width: 50px;
height: 50px;
display:flex;
align-items: center;
justify-content: center;
}
.item {
overflow:hidden;
}
.item::before{
content:'';
position:absolute;
left: 50%;
top:50%;
width:10px;
height:10px;
border-radius:100%;
box-shadow: 0px -100px 0px 200px #FFF;
transform: translate(-50%,-50%);
}
.plane {
position:absolute;
-webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 3s infinite;
z-index: 1;
}
.fa-plane {
transform: rotate(45deg);
color:red;
}
#-webkit-keyframes mymove {
from { transform: translateX(0); }
to { transform: translateX(420px); }
}
#keyframes mymove {
from { transform: translateX(0); }
to { transform: translateX(420px); }
}
#-webkit-keyframes coloration {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#keyframes coloration {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='main'>
<div class='plane'>
<i class="fa fa-3x fa-plane" aria-hidden="true"></i>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
<div class='item'>
</div>
</div>
If you are able to use radial gradient, you could do like this
.main {
display: flex;
position:relative;
border: 1px solid green;
margin: 100px;
height: 50px;
overflow:hidden;
}
.main::before{
content:'';
position:absolute;
left: 0;
top: 0;
width: 120%;
height:100%;
background: radial-gradient(black 15%, transparent 16%) left center;
background-size:40px 40px;
}
.main::after{
content:'';
position:absolute;
left: 0;
top: 0;
width: 0;
height:100%;
background: radial-gradient(orange 15%, transparent 16%) left center;
background-size:40px 40px;
animation: coloration 3s infinite;
}
.plane {
width: 50px;
height: 50px;
display:flex;
align-items: center;
justify-content: center;
position:absolute;
-webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 3s infinite;
z-index: 1;
}
.fa-plane {
transform: rotate(45deg);
color:red;
}
#-webkit-keyframes mymove {
from { transform: translateX(0); }
to { transform: translateX(420px); }
}
#keyframes mymove {
from { transform: translateX(0); }
to { transform: translateX(420px); }
}
#-webkit-keyframes coloration {
from { width: 0; }
to { width: 110%; }
}
#keyframes coloration {
from { width: 0; }
to { width: 110%; }
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class='main'>
<div class='plane'>
<i class="fa fa-3x fa-plane" aria-hidden="true"></i>
</div>
</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>
I am trying to create a header with CSS3 animation and I am encountering a problem. The problem is that the menu links do not show up in IE10 on load. However, the menu items do show up when I randomly move the mouse over the area where the links should have been present.
I searched a lot but cannot find the root-cause. However, I managed to sort of figure out that this happens only in IE10 and that too only when the animation is enabled.
Below, I have included two jsFiddle versions. One is without animation property where the menu is displayed correctly. The other is with animation where the menu doesn't show up.
With Animation | Without Animation
Note:
There are no issues in Chrome 30, FireFox 23, Opera 15 and Safari
5.1.7
The Heading and Sub-heading will have multi-lingual text which would be fetched from Database. Hence I don't want to do this
animation with images. I am also not looking for any JavaScript or
jQuery alternates/work-arounds.
HTML
<header id="header">
<div id="banner" class="banner left">
<div id="first_line">Heading</div>
<div>Sub-heading</div>
</div>
<nav class="menu right">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
<li class="mselected">Link5</li>
<li>Link6
</li>
</ul>
</nav>
</header>
CSS
.left {
float: left;
}
.right {
float: right;
}
#header {
background-color: black;
color: white;
font-size: 15px;
height: 70px;
padding-top: 20px;
overflow: hidden;
}
.banner {
cursor: default;
letter-spacing: 1px;
padding-left: 10px;
-webkit-animation: entry 2s linear 2s 5 alternate;
-moz-animation: entry 2s linear 2s 5 alternate;
animation: entry 2s linear 2s 5 alternate; /* This seems to cause the problem */
}
#-webkit-keyframes entry {
from {
-webkit-transform: scale(0.5) rotateX(0deg);
}
25% {
-webkit-transform: scale(0.625) rotateX(90deg);
}
75% {
-webkit-transform: scale(0.875) rotateX(270deg);
}
to {
-webkit-transform: scale(1) rotateX(360deg);
}
}
#keyframes entry {
from {
transform: scale(0.5) rotateX(0deg);
}
25% {
transform: scale(0.625) rotateX(90deg);
}
75% {
transform: scale(0.875) rotateX(270deg);
}
to {
transform: scale(1) rotateX(360deg);
}
}
#-moz-keyframes entry {
from {
-moz-transform: scale(0.5) rotateX(0deg);
}
25% {
-moz-transform: scale(0.625) rotateX(90deg);
}
75% {
-moz-transform: scale(0.875) rotateX(270deg);
}
to {
-moz-transform: scale(1) rotateX(360deg);
}
}
.menu {
padding-right: 10px;
letter-spacing: 0.5px;
}
#first_line {
font-size: 30px;
line-height: 45px;
}
.menu ul {
margin-top: 45px;
}
.menu li {
list-style: none;
display: inline;
padding: 10px 10px 10px 10px;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background-clip: padding-box;
}
.menu li a {
color: white;
}
.menu li:hover {
background-color: white;
}
.menu li:hover a, .menu li a:hover {
color: black;
}
.mselected {
background-color: white;
color: black;
}
It seems like the issue is caused due to the delay set for the animation. If we remove the delay, it works as expected and the links are displayed on page load. Fiddle
animation: entry 2s linear 5 alternate;
Note: This is just a work-around solution. I will update if I manage to find out the reason why it doesn't work with animation delay.