Unintentional delay when hover off - css

When I hover-on the transition starts immediately, but it waits for maybe 300ms before starting the reverse transition when I hover-off. (https://jsfiddle.net/vawpnrL9/1/)
<div id="isa-hover-gallery">
<a href="https://febc.org/indonesia">
<div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&h=560&w=798&q=45&f=.jpg')">
<div class="slide-text">
<p><b>Sharing His Faith in Pakistan</b></p>
<p>Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…</p>
</div>
</div>
</a>
</div>
#isa-hover-gallery {
display: flex;
flex-wrap: wrap;
}
#isa-hover-gallery .isa-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 215px;
min-width: 320px;
margin: 0 24px 24px 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#isa-hover-gallery .isa-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image > span {
position: relative;
z-index: 11;
opacity: 0;
color: #ffffff;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image .slide-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4px 6px;
background-color: rgba(0,0,0,0.8);
color: #ffffff;
z-index: 11;
}
#isa-hover-gallery .isa-image .slide-text p:first-child {
padding-bottom: 0;
}
#isa-hover-gallery .isa-image .slide-text p:last-child {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: 600ms ease-in;
}
#isa-hover-gallery .isa-image:hover::after {
background-color: rgba(0,0,0,0.6);
}
#isa-hover-gallery .isa-image:hover > span {
opacity: 1;
}
#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
max-height: 1000px;
margin: auto;
padding: auto;
}
I have tried different transition speeds and disabling transitions on other elements and nothing helped.


This is because you are animating max-height and you put a big value to it so you can control this by reducing the max-height to lower value:
#isa-hover-gallery {
display: flex;
flex-wrap: wrap;
}
#isa-hover-gallery .isa-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 215px;
min-width: 320px;
margin: 0 24px 24px 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#isa-hover-gallery .isa-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image>span {
position: relative;
z-index: 11;
opacity: 0;
color: #ffffff;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image .slide-text {
position: absolute;
bottom: 0;
left: 0;
right:0;
padding: 4px 6px;
background-color: rgba(0, 0, 0, 0.8);
color: #ffffff;
z-index: 11;
}
#isa-hover-gallery .isa-image .slide-text p:first-child {
padding-bottom: 0;
}
#isa-hover-gallery .isa-image .slide-text p:last-child {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: 600ms ease-in;
}
#isa-hover-gallery .isa-image:hover::after {
background-color: rgba(0, 0, 0, 0.6);
}
#isa-hover-gallery .isa-image:hover>span {
opacity: 1;
}
#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
max-height: 100px;
margin: auto;
padding: auto;
}
<div id="isa-hover-gallery">
<a href="https://febc.org/indonesia">
<div class="isa-image" style="background-image:url('https://febc2017.wpengine.com/wp-content/plugins/justified-image-grid/timthumb.php?src=https%3A%2F%2Ffebc2017.wpengine.com%2Fwp-content%2Fuploads%2FEmail-1-Pakistan-Listener-Story_banner-image-900x600.jpg&h=560&w=798&q=45&f=.jpg')">
<div class="slide-text">
<p><b>Sharing His Faith in Pakistan</b></p>
<p>Anam* was given an extraordinary opportunity after he came to faith in Christ…He was asked to preach from the Bible in the mosque his father ran…</p>
</div>
</div>
</a>
</div>

Related

Setting A Hamburger Menu So That It Stretches Across The Entire Screen

Below is the code that I've used to create a responsive hamburger menu. I'd like to set the hamburger menu so that when opened it stretches (and is displayed) across the entire screen. I imagine that this would involve editing the CSS, which I have unsuccessfully tried doing.
If anyone has any ideas on how I could have the hamburger menu displayed across the entire screen, I'd appreciate you sharing your knowledge with me. Thank you.
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden">
<li style="border-bottom: 1px solid lightgray">Home</li>
<li style="border-bottom: 1px solid lightgray">Blog</li>
<li style="border-bottom: 1px solid lightgray">About This Website</li>
<li style="border-bottom: 1px solid lightgray">Bibliography</li>
</ul>
</nav>
</header>
</div>

It's just a matter of adjusting the menu width and the translation dimension to match. Look into how you can use your browser's document inspector to find styles relevant to your goals.
FYI, you don't need vendor prefixes for transform or transition.
/* Scroll down... */
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -100vw; /* <------------------------------------------------ HERE */
overflow-y: hidden;
width: 100vw; /* <------------------------------------------------ HERE */
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>

how to make owl carousel appear in all the pages of the blog

im really new at this but made owl carousel appear at the main page of my blog just the way i like it.
the thing is, now i want it to appear the same way in all the pages of the blog. is there a way i can make the call in the pages or anything i can add to the theme or main page so it can show it in all the articles?
i have it in the html of the theme like this
* ######## Top Feature Css ######################### */
.recent-boxes .carousel {
position: relative;
margin: 0 0 0!important;
padding: 0;
overflow: visible;
height: auto;
display: block;
clear: both
}
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
#keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out
}
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px)
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel .owl-refresh .owl-item {
display: none
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d
}
.owl-carousel.owl-text-select-on .owl-item {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
.owl-carousel .owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.no-js .owl-carousel {
display: block
}
.owl-prev,
.owl-next {
top: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
font-family: FontAwesome;
position: absolute;
z-index: 1;
display: block;
padding: 0;
cursor: pointer;
padding: 0;
text-align: center;
overflow: hidden
}
.owl-prev {
left: 0
}
.owl-prev:before {
content: "\f104"
}
.owl-next {
right: 0
}
.owl-next:before {
content: "\f105"
}
.owl-prev:hover,
.owl-next:hover {
background-color: #000
}
.owl-dots {
position: absolute;
bottom: 1px;
width: 33.33%;
left: 0;
right: 0;
margin: auto;
text-align: center
}
.owl-dot {
background: #fff;
height: 3px;
width: 10px;
display: inline-block;
margin: 0 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
opacity: .6
}
.owl-dot.active,
.owl-dot:hover {
background: #e74c3c
}
.main-carousel {
height: 350px;
overflow: hidden
}
.main-carousel .owl-item {
width: 100%;
}
.carousel-item {
height: 350px;
width: 100%;
position: relative;
padding: 0!important;
display: block;
overflow: hidden
}
.carousel-item .box-image {
height: 350px;
position: relative;
width: 100%;
display: block
}
.carousel-item .box-image:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 151px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
opacity: .8
}
.carousel-content {
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
box-sizing: border-box
}
.carousel-item .carousel-content {
padding: 15px;
text-align: center;
}
.carousel-item .recent-title {
margin: 10px 0 5px;
font-size: 19px;
font-weight: 400
}
.carousel-item .recent-title a {
color: #fff;
display: block;
line-height: 1.4em;
text-shadow: 0 .5px .5px rgba(34, 34, 34, 0.3)
}
.carousel-item .recent-author {
color: #fff;
}
.carousel-item .recent-date {
visibility: hidden;
display: none;
}
.carousel-tag a {
display: inline-block;
background-color: #e74c3c;
color: #fff;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
text-transform: uppercase;
border-radius: 2px
}
.carousel-tag a:before {
content: "\f091";
font-family: FontAwesome;
font-weight: 400;
font-style: normal;
line-height: 1;
padding-right: 4px;
}
.recent-author::before {
content: '\f007';
font-family: fontawesome;
color: #bbb;
margin-right: 5px;
}
.recent-author {
margin-right: 10px;
}
.carousel-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40, 35, 40, 0.05)
}
.main-carousel .owl-item:hover .carousel-overlay {
background-color: $mainbgcolor;
opacity:0.5;
}
.carousel-overlay:before {
z-index: 3;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.carousel-overlay:after {
z-index: 3;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
.carousel-overlay:before, .carousel-overlay:after {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.main-carousel .owl-item:hover .carousel-overlay:before, .main-carousel .owl-item:hover .carousel-overlay:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.main-carousel .owl-prev,
.main-carousel .owl-next {
margin-top: 0px;
width: 40px;
height: 40px;
font-size: 25px;
line-height: 40px
}
.main-carousel .owl-prev {
left: -50px
}
.main-carousel:hover .owl-prev {
left: 0
}
.main-carousel .owl-next {
right: -50px
}
.main-carousel:hover .owl-next {
right: 0
}
.main-carousel .owl-dots {
bottom: 10px
}

z index multiple elements

hey guys I have 3 elements I'm using z-index and position property.
the first one is the main navbar (working fine)
the 2nd is sidenav
the 3rd is a button.
the button must have the position relative.
when I'm scrolling the main navbar is taking over the button which is great !
but the side navbar is not.
I did try to change the z-index on each element.
the mobile navbar is the main navbar which working fine.
.mobile-navbar {
background-color: rgb(0, 0, 0);
position: fixed;
z-index: 1;
width: 100%;
display: flex;
justify-content: space-between;
img {
background-color: rgba(0, 0, 0, 0.274);
}
div {
display: flex;
justify-content: center;
align-items: center;
a {
font-size: 2rem;
color: #fff;
margin: 5px;
text-decoration: none;
span {
background-color: red;
border-radius: 10px;
padding: 0 3px;
}
}
}
}
.side-nav {
position: fixed;
z-index: 0;
width: 100%;
height: 100vh;
transform: translateX(-100%);
transition: 300ms ease-out;
&-active {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgb(12, 6, 39);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: 300ms ease-out;
button.close-nav {
padding: 5px;
background-color: rgb(14, 12, 12);
color: #fff;
border: none;
font-size: 2rem;
font-weight: 700;
}
.dynamic-links {
height: 30%;
button {
padding: 5px;
font-size: 2rem;
background: rgba(0, 0, 0, 0);
color: #fff;
border: none;
}
.sidenav-link {
color: #fff;
text-decoration: none;
font-size: 2rem;
margin: 0 10px;
}
}
.sidenav-links {
display: flex;
flex-direction: column;
height: 50%;
.sidnav-link {
color: #fff;
margin: 10px 0;
font-size: 2rem;
text-decoration: none;
text-align: center;
}
}
}
}
the button I need to use position relative and taking over the side-navbar:
button {
position: relative;
z-index: 0;
cursor: pointer;
font-size: 1.3rem;
padding: 10px 15px;
border: none;
outline: #06a821;
border-radius: 30px;
color: #fff;
letter-spacing: 0.3rem;
background: linear-gradient(
90deg,
rgba(5, 116, 197, 1) 35%,
rgba(106, 183, 239, 1) 100%
);
transition: ease-in-out 300ms;
&::before {
position: absolute;
border: 1px solid #fff;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border-radius: 30px;
content: "";
}

only had to add the z-index in the active class.
befor :
.side-nav {
position: fixed;
z-index: 0;
width: 100%;
height: 100vh;
transform: translateX(-100%);
transition: 300ms ease-out;
&-active {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgb(12, 6, 39);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: 300ms ease-out
after:
.side-nav {
position: fixed;
width: 100%;
height: 100vh;
transform: translateX(-100%);
transition: 300ms ease-out;
&-active {
position: fixed;
z-index: 1;
width: 100%;
height: 100vh;
background-color: rgb(12, 6, 39);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translateX(0);
transition: 300ms ease-out;

How to fix hover::after and transition within doesn't work?

I'm trying to add a cool effect on a button using ::after and transition. But,
it doesn't work as i expected.
I did the following change in scss:
.btn{
&:link,
&:visited{
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
&:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
&::after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
} }
&::after{
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
}
&hover is working as i expected and it gives the proper effect. But,
hover::after isn't working and I can't see my cool effect.Why is this?

I assume this is the effect you are trying to achieve. You need to add a background color to &::after
.btn, .btn:link, .btn:visited {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all .2s;
position: relative;
font-size: 1.6rem;
}
.btn:hover{
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba($color-black,.2);
}
.btn:hover:after{
transform: scaleX(1.4) scaleY(1.6);
opacity: 0;
}
.btn:after{
content: "";
display: inline-block;
background-color: red;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all .4s;
}
<a class="btn">Button</a>

Draw a ring around a circle in Progress Tracker

How can I draw a ring around the circle in this progress tracker like on the image ring around circle
The progress tracker is based on http://nigelotoole.github.io/progress-tracker/
Here is the example https://codepen.io/anon/pen/JewMeM
The approach was with:
.progress-step.is-active .progress-marker {
background-color: #2196F3;
border: 2px solid #0e38b1;
}
There must be an empty/white space between the ring and the circle.

You can use some pseudo elements.
Try this
.progress-step.is-active .progress-marker::after {
content: "";
position: absolute;
border: 2px solid #0e38b1;
height: 22px;
width: 22px;
background: transparent;
border-radius: 100%;
}
.progress-tracker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
list-style: none;
}
.progress-step {
display: block;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
margin: 0;
padding: 0;
min-width: 28px;
}
.progress-step:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.progress-step:not(:last-child)::after {
content: '';
display: block;
position: absolute;
z-index: -10;
top: 6px;
bottom: 12px;
right: 0;
width: 100%;
height: 2px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.progress-step.is-active .progress-title {
font-weight: 400;
}
.progress-step > a {
display: block;
}
.progress-marker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 20;
width: 10px;
height: 10px;
color: #fff;
font-weight: 400;
border: 2px solid transparent;
border-radius: 50%;
-webkit-transition: background-color, border-color;
transition: background-color, border-color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.progress-text {
display: block;
padding: 14px 9.3333333333px;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-title {
margin-top: 0;
}
.progress-step .progress-marker {
color: #fff;
background-color: #0e38b1;
}
.progress-step::after {
background-color: #0e38b1;
}
.progress-step .progress-text, .progress-step .progress-step > a .progress-text {
color: #333333;
}
.progress-step.is-active .progress-marker {
background-color: #2196F3;
}
.progress-step.is-complete .progress-marker {
background-color: #1976D2;
}
.progress-step.is-complete::after {
background-color: #868686;
}
.progress-step:hover .progress-marker {
background-color: #56ADF5;
}
.progress-tracker--center .progress-step {
text-align: center;
}
.progress-tracker--center .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--center .progress-step::after {
right: -50%;
}
.progress-tracker--center .progress-marker {
margin-left: auto;
margin-right: auto;
}
.progress-tracker--right .progress-step {
text-align: right;
}
.progress-tracker--right .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--right .progress-step::after {
right: calc(-100% + 14px);
}
.progress-tracker--right .progress-marker {
margin-left: auto;
}
.progress-tracker--border {
padding: 5px;
border: 2px solid #868686;
border-radius: 38px;
}
.progress-tracker--spaced .progress-step::after {
width: calc(100% - 30px);
margin-right: 8px;
}
.progress-tracker--word {
padding-right: 38.6666666667px;
overflow: hidden;
}
.progress-tracker--word .progress-text {
display: inline-block;
white-space: nowrap;
}
.progress-tracker--word .progress-title {
margin: 0;
}
.progress-tracker--word-center {
padding-right: 38.6666666667px;
padding-left: 38.6666666667px;
}
.progress-tracker--word-center .progress-text {
padding-right: 0;
padding-left: 0;
-webkit-transform: translateX(calc(-50% + 14px));
transform: translateX(calc(-50% + 14px));
}
.progress-tracker--word-right {
padding-right: 0;
padding-left: 38.6666666667px;
}
.progress-tracker--word-right .progress-text {
padding-left: 0;
-webkit-transform: translateX(calc(-100% + 28px));
transform: translateX(calc(-100% + 28px));
}
.progress-tracker--text .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--text-top .progress-step::after {
top: auto;
}
.progress-tracker--text-top .progress-text {
height: 100%;
}
.progress-tracker--text-top .progress-marker {
bottom: 28px;
}
.progress-tracker--text-inline .progress-step {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.progress-tracker--text-inline .progress-text {
position: relative;
z-index: 30;
max-width: 70%;
white-space: nowrap;
padding-top: 0;
padding-bottom: 0;
background-color: #fff;
}
.progress-tracker--text-inline .progress-title {
margin: 0;
}
.progress-tracker--square .progress-step {
padding-top: 0;
}
.progress-tracker--square .progress-marker {
-webkit-transform: scaleX(0.33) translateY(-12px);
transform: scaleX(0.33) translateY(-12px);
border-radius: 0;
}
#media (max-width: 399px) {
.progress-tracker-mobile {
overflow-x: auto;
}
.progress-tracker-mobile .progress-tracker {
min-width: 200%;
}
}
.progress-tracker--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.progress-tracker--vertical .progress-step {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.progress-tracker--vertical .progress-step::after {
right: auto;
top: 14px;
left: 12px;
width: 4px;
height: 100%;
}
.progress-tracker--vertical .progress-marker {
position: absolute;
left: 0;
}
.progress-tracker--vertical .progress-text {
padding-top: 7px;
padding-left: 42px;
}
.progress-tracker--vertical .progress-step:not(:last-child) .progress-text {
padding-bottom: 42px;
}
#-webkit-keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
#keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
.anim-ripple .progress-marker::before, .anim-ripple-large .progress-marker::before, .anim-ripple-splash .progress-marker::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
}
.anim-ripple :not(:active) .progress-marker::before, .anim-ripple-large :not(:active) .progress-marker::before, .anim-ripple-splash :not(:active) .progress-marker::before {
-webkit-animation: scale-up 0.3s ease-out;
animation: scale-up 0.3s ease-out;
}
.anim-ripple :focus .progress-marker::before, .anim-ripple-large :focus .progress-marker::before, .anim-ripple-splash :focus .progress-marker::before {
visibility: visible;
}
.anim-ripple-large .progress-marker::before {
width: 200%;
height: 200%;
}
.anim-ripple-splash .progress-marker::before {
width: 200%;
height: 200%;
box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
}
.anim-ripple-double .progress-marker::before, .anim-ripple-double .progress-marker::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
background: none;
border: 3px solid rgba(0, 0, 0, 0.3);
}
.anim-ripple-double :not(:active) .progress-marker::before, .anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation: scale-up 0.3s ease-out 0s;
animation: scale-up 0.3s ease-out 0s;
}
.anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.anim-ripple-double :focus .progress-marker::before, .anim-ripple-double :focus .progress-marker::after {
visibility: visible;
}
.anim-path .progress-step::after {
background-image: -webkit-linear-gradient(left, #0e38b1 50%, #868686 50%);
background-image: linear-gradient(to right, #0e38b1 50%, #868686 50%);
background-size: 200% 100%;
background-position: 0% 100%;
-webkit-transition: background-position 0.3s ease-out;
transition: background-position 0.3s ease-out;
}
.anim-path .progress-step.is-complete::after {
background-position: -100% 100%;
}
.progress-step.is-active .progress-marker::after {
content: "";
position: absolute;
border: 2px solid #0e38b1;
height: 22px;
width: 22px;
background: transparent;
border-radius: 100%;
}
<ul class="progress-tracker progress-tracker--spaced">
<li class="progress-step is-active">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
</ul>
Updated pen: https://codepen.io/anon/pen/VVqQRw

If you are not willing to change the HTML structure of your progress tracket, the easiest way would be with a box-shadow IMO, like so :
box-shadow: 0 0 0 10px #FFF, 0 0 0 11px #000
The first box-shadow is going to be the color of the background (here set to 10px) and the second one is going to be the color of your border (here set to 11px so that it shows a 1px border). To change your border width or size simply adjust those two values.
Hope this helps !

I hope this works for you
<div class="cr1">
<div class="cr2">
</div>
</div>
.cr1{
border: 10px solid #bababa;
width: 232px;
border-radius: 50%;
}
.cr2{
background: #bababa;
width: 150px;
height: 150px;
border-radius: 56%;
display: inline-block;
border: 41px solid #fff;
}

Adding a box shadow will do the trick.
Change .progress-step.is-active .progress-marker to,
.progress-step.is-active .progress-marker {
background-color: #2196F3;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #2196F3;
margin-top: -1px
}
Here's a working example: https://codepen.io/paddyfields/pen/GwPQPo

You can add border with :before selector
.progress-step.is-active .progress-marker:before {
content: "";
border: 2px solid #2196F3;
width: 20px;
height: 20px;
position: absolute;
border-radius: 100%
}
.progress-tracker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0;
list-style: none;
}
.progress-step {
display: block;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
margin: 0;
padding: 0;
min-width: 28px;
}
.progress-step:last-child {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
.progress-step:not(:last-child)::after {
content: '';
display: block;
position: absolute;
z-index: -10;
top: 6px;
bottom: 12px;
right: 0;
width: 100%;
height: 2px;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.progress-step.is-active .progress-title {
font-weight: 400;
}
.progress-step.is-active .progress-marker:before {
content: "";
border: 2px solid #2196F3;
width: 20px;
height: 20px;
position: absolute;
border-radius: 100%
}
.progress-step > a {
display: block;
}
.progress-marker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 20;
width: 10px;
height: 10px;
color: #fff;
font-weight: 400;
border: 2px solid transparent;
border-radius: 50%;
-webkit-transition: background-color, border-color;
transition: background-color, border-color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.progress-text {
display: block;
padding: 14px 9.3333333333px;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-title {
margin-top: 0;
}
.progress-step .progress-marker {
color: #fff;
background-color: #0e38b1;
}
.progress-step::after {
background-color: #0e38b1;
}
.progress-step .progress-text, .progress-step .progress-step > a .progress-text {
color: #333333;
}
.progress-step.is-active .progress-marker {
background-color: #2196F3;
}
.progress-step.is-complete .progress-marker {
background-color: #1976D2;
}
.progress-step.is-complete::after {
background-color: #868686;
}
.progress-step:hover .progress-marker {
background-color: #56ADF5;
}
.progress-tracker--center .progress-step {
text-align: center;
}
.progress-tracker--center .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--center .progress-step::after {
right: -50%;
}
.progress-tracker--center .progress-marker {
margin-left: auto;
margin-right: auto;
}
.progress-tracker--right .progress-step {
text-align: right;
}
.progress-tracker--right .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--right .progress-step::after {
right: calc(-100% + 14px);
}
.progress-tracker--right .progress-marker {
margin-left: auto;
}
.progress-tracker--border {
padding: 5px;
border: 2px solid #868686;
border-radius: 38px;
}
.progress-tracker--spaced .progress-step::after {
width: calc(100% - 30px);
margin-right: 8px;
}
.progress-tracker--word {
padding-right: 38.6666666667px;
overflow: hidden;
}
.progress-tracker--word .progress-text {
display: inline-block;
white-space: nowrap;
}
.progress-tracker--word .progress-title {
margin: 0;
}
.progress-tracker--word-center {
padding-right: 38.6666666667px;
padding-left: 38.6666666667px;
}
.progress-tracker--word-center .progress-text {
padding-right: 0;
padding-left: 0;
-webkit-transform: translateX(calc(-50% + 14px));
transform: translateX(calc(-50% + 14px));
}
.progress-tracker--word-right {
padding-right: 0;
padding-left: 38.6666666667px;
}
.progress-tracker--word-right .progress-text {
padding-left: 0;
-webkit-transform: translateX(calc(-100% + 28px));
transform: translateX(calc(-100% + 28px));
}
.progress-tracker--text .progress-step:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.progress-tracker--text-top .progress-step::after {
top: auto;
}
.progress-tracker--text-top .progress-text {
height: 100%;
}
.progress-tracker--text-top .progress-marker {
bottom: 28px;
}
.progress-tracker--text-inline .progress-step {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.progress-tracker--text-inline .progress-text {
position: relative;
z-index: 30;
max-width: 70%;
white-space: nowrap;
padding-top: 0;
padding-bottom: 0;
background-color: #fff;
}
.progress-tracker--text-inline .progress-title {
margin: 0;
}
.progress-tracker--square .progress-step {
padding-top: 0;
}
.progress-tracker--square .progress-marker {
-webkit-transform: scaleX(0.33) translateY(-12px);
transform: scaleX(0.33) translateY(-12px);
border-radius: 0;
}
#media (max-width: 399px) {
.progress-tracker-mobile {
overflow-x: auto;
}
.progress-tracker-mobile .progress-tracker {
min-width: 200%;
}
}
.progress-tracker--vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.progress-tracker--vertical .progress-step {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.progress-tracker--vertical .progress-step::after {
right: auto;
top: 14px;
left: 12px;
width: 4px;
height: 100%;
}
.progress-tracker--vertical .progress-marker {
position: absolute;
left: 0;
}
.progress-tracker--vertical .progress-text {
padding-top: 7px;
padding-left: 42px;
}
.progress-tracker--vertical .progress-step:not(:last-child) .progress-text {
padding-bottom: 42px;
}
#-webkit-keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
#keyframes scale-up {
from {
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
to {
opacity: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
}
.anim-ripple .progress-marker::before, .anim-ripple-large .progress-marker::before, .anim-ripple-splash .progress-marker::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
}
.anim-ripple :not(:active) .progress-marker::before, .anim-ripple-large :not(:active) .progress-marker::before, .anim-ripple-splash :not(:active) .progress-marker::before {
-webkit-animation: scale-up 0.3s ease-out;
animation: scale-up 0.3s ease-out;
}
.anim-ripple :focus .progress-marker::before, .anim-ripple-large :focus .progress-marker::before, .anim-ripple-splash :focus .progress-marker::before {
visibility: visible;
}
.anim-ripple-large .progress-marker::before {
width: 200%;
height: 200%;
}
.anim-ripple-splash .progress-marker::before {
width: 200%;
height: 200%;
box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.35);
}
.anim-ripple-double .progress-marker::before, .anim-ripple-double .progress-marker::after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
visibility: hidden;
background: none;
border: 3px solid rgba(0, 0, 0, 0.3);
}
.anim-ripple-double :not(:active) .progress-marker::before, .anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation: scale-up 0.3s ease-out 0s;
animation: scale-up 0.3s ease-out 0s;
}
.anim-ripple-double :not(:active) .progress-marker::after {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.anim-ripple-double :focus .progress-marker::before, .anim-ripple-double :focus .progress-marker::after {
visibility: visible;
}
.anim-path .progress-step::after {
background-image: -webkit-linear-gradient(left, #0e38b1 50%, #868686 50%);
background-image: linear-gradient(to right, #0e38b1 50%, #868686 50%);
background-size: 200% 100%;
background-position: 0% 100%;
-webkit-transition: background-position 0.3s ease-out;
transition: background-position 0.3s ease-out;
}
.anim-path .progress-step.is-complete::after {
background-position: -100% 100%;
}
<ul class="progress-tracker progress-tracker--spaced">
<li class="progress-step is-active">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
</li>
</ul>

Resources