I have the following CSS code, it is a nice sonar effect applied to an element on hover. It works fine in Firefox, Opera and Chrome
but I cannot make it work in IE(10+) and Edge too.
body {
background-color: #cccccc;
}
.text {
position: realtive;
display: block;
width: 85px;
margin: 150px auto 0px;
background-color: #;
}
.content {
display: block;
position: relative;
height: 100px;
width: 100px;
border: 2px solid white;
border-radius: 100%;
margin: 20px auto;
}
.icon {
display: block;
height: 100px;
width: 100px;
background-color: red;
}
.whiteSonarEffect .icon {
border-radius: 100%;
position: relative;
}
.whiteSonarEffect .icon:after {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
content:'';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
top: 0;
left: 0;
}
.whiteSonarEffect .icon:hover {
color: #fff;
}
.whiteSonarEffect .content:hover .icon:after {
-webkit-animation: whiteSonarEffect 1.3s ease-out 75ms;
-moz-animation: whiteSonarEffect 1.3s ease-out 75ms;
-o-animation: whiteSonarEffect 1.3s ease-out 75ms;
animation: whiteSonarEffect 1.3s ease-out 75ms;
}
#-webkit-keyframes whiteSonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-moz-keyframes whiteSonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
-moz-transform: scale(1.5);
opacity: 0;
}
}
#-o-keyframes whiteSonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
-o-transform: scale(1.5);
opacity: 0;
}
}
#keyframes whiteSonarEffect {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
<div class="whiteSonarEffect">
<div class="text"><h3>Hover Me</h3></div>
<div class="content">
<div class="icon"></div>
</div>
</div>
You can view it on CodePen: http://codepen.io/ivanchi/pen/YWNjVN
Would be grateful for any suggestions.
I have run into a similar issue in the past (can't remember where/when) but IE requires box-shadow to be set in the 0% keyframe also. In the below snippet, I've added the same box-shadow as in the 40% keyframe but have given a color with alpha=0 for all the shadows to make sure it is invisible.
This works in IE11, Edge, Chrome, Opera and Firefox.
body {
background-color: #cccccc;
}
.text {
position: realtive;
display: block;
width: 85px;
margin: 150px auto 0px;
background-color: #;
}
.content {
display: block;
position: relative;
height: 100px;
width: 100px;
border: 2px solid white;
border-radius: 100%;
margin: 20px auto;
}
.icon {
display: block;
height: 100px;
width: 100px;
background-color: red;
}
.whiteSonarEffect .icon {
border-radius: 100%;
position: relative;
}
.whiteSonarEffect .icon:after {
position: absolute;
width: 100%;
height: 100%;
border-radius: 100%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
top: 0;
left: 0;
}
.whiteSonarEffect .icon:hover {
color: #fff;
}
.whiteSonarEffect .content:hover .icon:after {
-webkit-animation: whiteSonarEffect 1.3s ease-out 75ms;
-moz-animation: whiteSonarEffect 1.3s ease-out 75ms;
-o-animation: whiteSonarEffect 1.3s ease-out 75ms;
animation: whiteSonarEffect 1.3s ease-out 75ms;
}
#-webkit-keyframes whiteSonarEffect {
0% {
opacity: 0.3;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0);
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}
#-moz-keyframes whiteSonarEffect {
0% {
opacity: 0.3;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0);
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
-moz-transform: scale(1.5);
opacity: 0;
}
}
#-o-keyframes whiteSonarEffect {
0% {
opacity: 0.3;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0);
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
-o-transform: scale(1.5);
opacity: 0;
}
}
#keyframes whiteSonarEffect {
0% {
opacity: 0.3;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0 10px 10px rgba(255, 255, 255, 0), 0 0 0 10px rgba(255, 255, 255, 0);
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
<div class="whiteSonarEffect">
<div class="text">
<h3>Hover Me</h3>
</div>
<div class="content">
<div class="icon"></div>
</div>
</div>
Related
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Closed 4 years ago.
I am trying to create a scaling text number to basically pulsate and scale at the same time. I am not sure as to why this isn't working or if I am over riding it some were. The pulsate works fine just not transform.
CSS:
.grad{
color: #0a77d5; /* Old browsers */
color: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6-15 */
color: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10-25,Safari5.1-6 */
color: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.pulsate {
-webkit-animation: pulsate 1.5s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 1.0;
}
#-webkit-keyframes pulsate {
0% {
opacity: 0.5;
transform: scale(1.0);
}
50% {
opacity: 1.0;
-webkit-transform: scale(2.0);
}
100% {
opacity: 0.5;
-webkit-transform: scale(3.0);
}
}
**.shadow {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0, 0, 0, .1),
0 0 5px rgba(0, 0, 0, .1),
0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .25),
0 10px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
box-shadow: none !important;
}
HTML:
<b class="shadow grad pulsate">#1</b>
You need to set displayrule, and other changes, like the rules without prefix.
CSS
.grad {
color: #0a77d5;
/* Old browsers */
color: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
/* FF3.6-15 */
color: -webkit-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
/* Chrome10-25,Safari5.1-6 */
color: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.pulsate {
-webkit-animation: pulsate 1.5s ease-out;
-webkit-animation-iteration-count: infinite;
animation: pulsate 1.5s ease-out;
animation-iteration-count: infinite;
opacity: 1.0;
transform: scale(1);
display: inline-block; //I set here the display
}
#-webkit-keyframes pulsate {
0% {
opacity: 0.5;
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
50% {
opacity: 1.0;
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
100% {
opacity: 0.5;
-webkit-transform: scale(3.0);
transform: scale(3.0);
}
}
**.shadow {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
box-shadow: none !important;
}
HTML
<b class="shadow grad pulsate">#1</b>
DEMO HERE
I'm trying to create a shine animation on an element that already has a gradient.
But my animation remove the gradient background...
This is what I have done:
body {
background: blue;
}
.mytoast {
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(.12, .89, .98, .47);
box-sizing: border-box;
/*background-color:rgba(0, 0, 0, 0.8);*/
background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: grab;
/* display: -webkit-flex;
display: -ms-flexbox;*/
/* display: flex;*/
display: inline-block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
margin-top: 8px;
max-width: 100%;
min-height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 0;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
#-webkit-keyframes ShineAnimation {
from {
background-repeat: no-repeat;
background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
background-position: -250px -250px;
background-size: 600px 600px
}
to {
background-repeat: no-repeat;
background-position: 250px 250px;
}
}
<div class="mytoast">
</div>
If you run the code above, you will see the shine animation but the issue is that it will also animate the gradient and removes it which is not what I am trying to do.
could someone please advice on this?
You can set multiple backgrounds (including gradients) in CSS. Since you only animate the background position of the shiny gradient, you can move all definitions to .mytoast, and set the definitions for each of the backgrounds.
In the animations set the background position for both backgrounds. The one for the non animated background would be the identical to the definition in .mytoast.
Note: unless you're going to support really old browsers, you don't need the -webkit prefix.
body {
background: blue;
}
.mytoast {
background:
linear-gradient(
to top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 45%,
rgba(255, 255, 255, 0.5) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.5) 52%,
rgba(255, 255, 255, 0.0) 57%,
rgba(255, 255, 255, 0.0) 100%
),
linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
background-size: 600px 600px, 100% 100%;
background-position: -250px -250px, center;
background-repeat: no-repeat;
animation: ShineAnimation 5s infinite cubic-bezier(.12, .89, .98, .47);
box-sizing: border-box;
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: grab;
display: inline-block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
margin-top: 8px;
max-width: 100%;
min-height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 0;
}
#keyframes ShineAnimation {
to {
background-position: 250px 250px, center;
}
}
<div class="mytoast">
</div>
I prefer creating a block overlaying before .mytoast and animate the shining block from left to right.
Hope this helps.
body {
width: 100%;
background: blue;
}
.mytoast {
box-sizing: border-box;
background-image: linear-gradient(-225deg, #ff3cac 0%, #562b7c 52%, #2b86c5 100%);
border-radius: 100px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
clear: both;
color: #fff;
cursor: -webkit-grab;
cursor: grab;
display: block;
font-size: 16px;
font-weight: 300;
height: auto;
line-height: 1.5;
width: 100%;
height: 48px;
padding: 16px 24px;
position: relative;
top: 0px;
width: 90%;
margin: 8px 0 0;
overflow: hidden;
}
.mytoast:before {
width: 100%;
height: 48px;
content: "";
background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, 0) 100%);
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(0.12, 0.89, 0.98, 0.47);
display: block;
position: absolute;
top: 0;
left: -100%;
z-index: 2;
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
#-webkit-keyframes ShineAnimation {
from {
left: -100%;
}
to {
left: 100%;
}
}
<div class="mytoast"></div>
How to Inherit properties in css? I have a class:
.drop-shadow-red {
font-size: 1.5vh;
padding: 0.4vh 0.7vh;
background: url(../images/redInvert.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
background-color: rgba(250, 210, 50, 0.9);
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 0.1vh 0;
height: auto;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
animation: blinkBorder .6s step-end infinite alternate;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
And I want now to create another class .drop-shadow-yellow that has all properties like .drop-shadow-red but the only change is that background-color is yellow. How to optimize the code to not duplicate so much code, like:
.drop-shadow-yellow {
font-size: 1.5vh;
padding: 0.4vh 0.7vh;
background: url(../images/redInvert.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
background-color: yellow; /* <-------------------------------------- */
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 0.1vh 0;
height: auto;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
animation: blinkBorder .6s step-end infinite alternate;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
Just create a class with all properties but background-color and name it for example drop-shadow.
Now you just create additional classes like red-bg and add background-color: red and pass the drop-shadow class as well as the background class to an object.
Example:
CSS:
.drop-shadow {
font-size: 1.5vh;
padding: 0.4vh 0.7vh;
background: url(../images/redInvert.png) no-repeat center left;
background-position: 8px 50%;
background-size: 2vh;
font-weight: bold;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
-mox-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4) , 0 0 40px rgba(0, 0, 0, 0.15) inset;
-moz-border-radius: 12px 12px 0 0;
border-radius: 0.1vh 0;
height: auto;
max-width: 100%; /* Max Width of the popover (depending on the container!) */
z-index: 99;
animation: blinkBorder .6s step-end infinite alternate;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
.red-bg{
background-color: rgba(250, 210, 50, 0.9);
}
HTML:
<div class="drop-shadow red-bg">Foo Bar!</div>
If you want to change only one property do it inline style and take everything else from the css.
I'm trying to ensure that only the box shadow has the pulsate and not the whole button.
The experience should see the button solid but with the box shadow fading in and out if that makes sense.
Here is my code:
.gps_ring {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 42px;
width: 180px;
background-color: blue;
text-align: center;
display: block;
color: white;
box-shadow: 0 0 17px black;
-moz-box-shadow: 0 0 17px black;
-webkit-box-shadow: 0 0 17px black;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
EXAMPLE
Simply animate only the shadow, like this
.gps_ring {
border: 3px solid #999;
border-radius: 30px;
height: 42px;
width: 180px;
background-color: blue;
text-align: center;
display: block;
color: white;
box-shadow: 0 0 17px black;
animation: pulsate 1s ease-out infinite;
}
#-webkit-keyframes pulsate {
0% { box-shadow: 0 0 0 black; }
50% { box-shadow: 0 0 17px black; }
100% { box-shadow: 0 0 0 black; }
}
<div id="state" class="grid_4 alpha">
Touch me
</div>
I think this is what you need. Better solution http://codepen.io/governorfancypants/pen/zvMxWm
<div class="circle">
<div class="inner-circle"></div>
<div class="cover-circle"></div>
</div>
.pulsating-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
&:before {
content: '';
position: relative;
display: block;
width: 300%;
height: 300%;
box-sizing: border-box;
margin-left: -100%;
margin-top: -100%;
border-radius: 45px;
background-color: #01a4e9;
animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
&:after {
content: '';
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background-color: white;
border-radius: 15px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}
}
#keyframes pulse-ring {
0% {
transform: scale(.33);
}
80%, 100% {
opacity: 0;
}
}
#keyframes pulse-dot {
0% {
transform: scale(.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(.8);
}
}
HTML
<span class="pulse"></span>
CSS
.pulse {
margin:80px;
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(0,0,0, 0.4);
animation: none;
}
.pulse:hover {
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0.5);
}
70% {
-webkit-box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
#keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.5);
box-shadow: 0 0 0 0 rgba(0,0,0, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 50px rgba(0,0,0, 0);
box-shadow: 0 0 0 50px rgba(0,0,0, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
Hover effect.
CodePen: https://codepen.io/smith-harshan/pen/MWpGXeY
Hope this would be a help.
I am trying to show a CSS3 animation as a loader-animation when I navigate to one of my subpages.
I am using keyframe animation on rotateY.
The issue is that on Firefox, while navigation to another page, the animation does work, but its very jerky and choppy.
While on Chrome and Safari, the same animation works smoothly and perfectly.
Here is a fiddle:
http://jsfiddle.net/p6mgxpbo/
HTML:
<div class="gb-loading">
<div id="animatedElem" class="pin-c">
<div class='pin'></div>
</div>
<div class="pin-mirror"></div>
<div id="gb-lb" class="load-bounce"></div>
</div>
CSS:
.gb-loading {
position: fixed;
left: 0;
right: 0;
top: 50%;
bottom: 0;
width: 70px;
height: 70px;
margin: auto;
z-index: 101;
margin-top: -100px;
}
.pin-c {
width: 70px;
height: 70px;
position: absolute;
top: 0;
left: 0;
z-index: 11;
-webkit-animation: pulsate 1.5s linear infinite;
-moz-animation: pulsate 1.5s linear infinite;
-o-animation: pulsate 1.5s linear infinite;
animation: pulsate 1.5s linear infinite;
}
.pin {
width: 70px;
height: 70px;
background-color: #34baab;
position: absolute;
left: 0;
top: 0;
-webkit-border-radius: 50% 50% 50% 0;
border-radius: 50% 50% 50% 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin-mirror {
width: 70px;
height: 70px;
background-color: #003146;
position: absolute;
left: 0;
bottom: -48px;
z-index: -1;
-webkit-border-radius: 50% 0 50% 50%;
border-radius: 50% 0 50% 50%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.pin:after {
content: '';
width: 25px;
height: 25px;
margin: 22px 0 0 22px;
background-color: #003146;
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.load-bounce {
width: 25px;
height: 25px;
position: absolute;
left: 65px;
background-color: #003146;
-webkit-transform: translateZ(0.5);
-moz-transform: translateZ(0.5);
transform: translateZ(0.5);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: bounce .5s linear infinite alternate;
-moz-animation: bounce .5s linear infinite alternate;
-o-animation: bounce .5s linear infinite alternate;
animation: bounce .5s linear infinite alternate;
}
#-webkit-keyframes pulsate {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(360deg);
}
}
#-moz-keyframes pulsate {
0% {
-moz-transform: rotateY(0deg);
}
100% {
-moz-transform: rotateY(360deg);
}
}
#keyframes pulsate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
#-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(-40px);
}
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(-40px);
}
}
#-moz-keyframes bounce {
0% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(-40px);
}
}
The jerk only comes when Its there on a page which is loading other resources. I am trying to use this element as a pre-loading animation. So it's on the page until the rest of the page is loading. I also have google maps on the same page. So, while the browser is downloading other resources, till that time the animation jerks. You'll not be able to see the jerk on the fiddle.
Need some insights on how to fix this.
Thanks in advance !!
P.S: I did go through a lot of answers related to this on StackOverflow and tried searching on Google, but to no avail.
Sadly, this is something that you will not be able to fix, amend or control with browsers. You will have to use some form of hack to get it to work or confuse the system into doing what you want, but from a normal render, it won't work.
What you could possibly do is add a delay to the animation.
-webkit-animation: pulsate 0.8s linear 10ms infinite;
-moz-animation: pulsate 0.8s linear 10ms infinite;
-o-animation: pulsate 0.8s linear 10ms infinite;
animation: pulsate 0.8s linear 10ms infinite;
JSFiddle Example
What this will do is let the page render, paint and display, then it will wait for 100ms (0.1s) before starting the animation.
If this doesn't work, then it's down to FF not rendering animations as cleanly as Chrome or some other browsers and that is simply a browser issue and will be exceedingly difficult to get round.
Every browser has a completely different tree, render and paint process for displaying HTML & CSS to your monitor. Gecko (FF) and WebKit (Chrome) both use completely different methods and processes to display the page and sadly, when it comes to doing animations, Gecko has the tiniest amount of lag when starting up the animation which is why you see the small bit of lag/jerkiness when the animation begins.
Webkit flow
Gecko flow
As you can see from the above flows, both flows are completely different and the way that the DOM is loaded in, rendered, painted and then displayed is completely different.
Hope this help clears up the issue.
I've added one of the best pieces of information for you to read up on about browser rendering. It's always good to have an understanding of how browsers work when working on the front-end.
How modern browsers work
I am using keyframes with box-shadow to create an animation. Then, I am using the animation command to select the keyframe name and define some detailes on the animation (duration, delay etc...).
#myanimation{
animation: x 1s 1 ease-out ;
-webkit-animation: x 1s 1 ;
-webkit-backface-visibility: hidden;
-moz-animation: x 1s 1;
-o-animation: x 1s 1 ;
}
I will not post my keyframe, because its long. However, even though my animation duration is only 1 seconds, I am experiencing lags.
I tried everything to fix the lags, I added linear,ease-in-out etc.. all kinds of tags to the animation commnad but unsuccessful.
At the end, I just
deactivated the add-ons
(since add-ons also reduce the performance of firefox especially add-ons that block add-ons). After deactivating all my add-ons, it worked perfectly.
For some reason when you animate with Skew(0.1deg) it is not choppy.
This is on firefox 91.0 (64bit).
.test {
animation: breath2 0.8s linear 10ms infinite alternate;
}
#keyframes breath2 {
0% { transform: skewX(0.1deg) scaleX(1) translateY(-10px)}
100% { transform: skewX(0.1deg) scaleX(0.95) translateY(10px)}
}
.button {
border: 1px solid green;
height: 50px;
width: 150px;
border-radius: var(--border-radius);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
font: 15px sans-serif;
font-weight: 300;
text-shadow: 0 0 20px #fff;
text-transform: uppercase;
-webkit-animation: breath2 0.8s linear 10ms infinite alternate;
animation: breath2 0.8s linear 10ms infinite alternate;
cursor: pointer;
margin-top: 10px;
text-decoration: none;
}
.button:before {
content: "";
display: block;
width: calc(100% - 10px);
height: calc(50px - 8px);
left: 5px;
top: 3px;
position: absolute;
background-color: transparent;
border: 1px solid #fff;
border-radius: var(--border-radius-before);
}
.button.fire {
border-color: #ffeca8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 138, 48, 0.6)), to(rgba(240, 96, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(255, 138, 48, 0.6), rgba(240, 96, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(255, 138, 48, 0.6), 0 0px 3px rgba(240, 96, 29, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
box-shadow: 0 0 0px rgba(255, 138, 48, 0.6), 0 0px 3px rgba(240, 96, 29, 0.6), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
color: #ffeca8;
}
.button.fire::before {
-webkit-box-shadow: inset 0 0 20px #ffeca8;
box-shadow: inset 0 0 20px #ffeca8;
}
.button.ice {
border-color: #a8ecff;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(48, 138, 255, 0.6)), to(rgba(29, 96, 240, 0.6)));
background-image: linear-gradient(to bottom, rgba(48, 138, 255, 0.6), rgba(29, 96, 240, 0.6));
-webkit-box-shadow: 0 0 0px rgba(48, 138, 255, 0.6), 0 0px 3px rgba(29, 96, 240, 0.6), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
box-shadow: 0 0 0px rgba(48, 138, 255, 0.6), 0 0px 3px rgba(29, 96, 240, 0.6), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
color: #a8ecff;
}
.button.ice::before {
-webkit-box-shadow: inset 0 0 20px #a8ecff;
box-shadow: inset 0 0 20px #a8ecff;
}
.button.blaze {
border-color: #ffa8a8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(156, 20, 20, 0.6)), to(rgba(240, 29, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(156, 20, 20, 0.6), rgba(240, 29, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(156, 20, 20, 0.6), 0 0px 3px rgba(240, 29, 29, 0.6), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
box-shadow: 0 0 0px rgba(156, 20, 20, 0.6), 0 0px 3px rgba(240, 29, 29, 0.6), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
color: #ffa8a8;
}
.button.blaze::before {
-webkit-box-shadow: inset 0 0 20px #ffa8a8;
box-shadow: inset 0 0 20px #ffa8a8;
}
.button.nature {
border-color: #b7ffa8;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(9, 134, 15, 0.6)), to(rgba(36, 240, 29, 0.6)));
background-image: linear-gradient(to bottom, rgba(9, 134, 15, 0.6), rgba(36, 240, 29, 0.6));
-webkit-box-shadow: 0 0 0px rgba(9, 134, 15, 0.6), 0 0px 3px rgba(36, 240, 29, 0.6), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
box-shadow: 0 0 0px rgba(9, 134, 15, 0.6), 0 0px 3px rgba(36, 240, 29, 0.6), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
color: #b7ffa8;
}
.button.nature::before {
-webkit-box-shadow: inset 0 0 20px #b7ffa8;
box-shadow: inset 0 0 20px #b7ffa8;
}
.button:hover {
text-decoration: none;
}
.button:hover.fire {
-webkit-box-shadow: 0 0 10px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
box-shadow: 0 0 10px rgba(255, 138, 48, 0.8), inset 0 1px #ffeca8, inset 0 -1px #ffeca8;
}
.button:hover.fire:before {
-webkit-box-shadow: inset 0 0 50px 0 #ffeca8;
box-shadow: inset 0 0 50px 0 #ffeca8;
}
.button:hover.ice {
-webkit-box-shadow: 0 0 10px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
box-shadow: 0 0 10px rgba(48, 138, 255, 0.8), inset 0 1px #a8ecff, inset 0 -1px #a8ecff;
}
.button:hover.ice:before {
-webkit-box-shadow: inset 0 0 50px 0 #a8ecff;
box-shadow: inset 0 0 50px 0 #a8ecff;
}
.button:hover.blaze {
-webkit-box-shadow: 0 0 10px rgba(156, 20, 20, 0.8), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
box-shadow: 0 0 10px rgba(156, 20, 20, 0.8), inset 0 1px #ffa8a8, inset 0 -1px #ffa8a8;
}
.button:hover.blaze:before {
-webkit-box-shadow: inset 0 0 50px 0 #ffa8a8;
box-shadow: inset 0 0 50px 0 #ffa8a8;
}
.button:hover.nature {
-webkit-box-shadow: 0 0 10px rgba(9, 134, 15, 0.8), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
box-shadow: 0 0 10px rgba(9, 134, 15, 0.8), inset 0 1px #b7ffa8, inset 0 -1px #b7ffa8;
}
.button:hover.nature:before {
-webkit-box-shadow: inset 0 0 50px 0 #b7ffa8;
box-shadow: inset 0 0 50px 0 #b7ffa8;
}
.button:hover + .button:hover {
margin-top: 15px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.breathingMain {
-webkit-animation: breath2 2s 0.5s infinite alternate;
animation: breath2 2s 0.5s infinite alternate;
}
#-webkit-keyframes breath {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.95);
transform: scaleX(0.95);
}
}
#keyframes breath {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
-webkit-transform: scaleX(0.95);
transform: scaleX(0.95);
}
}
.test {
-webkit-animation: breath2 0.8s linear 10ms infinite alternate;
animation: breath2 0.8s linear 10ms infinite alternate;
}
#-webkit-keyframes breath2 {
0% {
-webkit-transform: skewX(0.1deg) scaleX(1) translateY(-10px);
transform: skewX(0.1deg) scaleX(1) translateY(-10px);
}
100% {
-webkit-transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
}
}
#keyframes breath2 {
0% {
-webkit-transform: skewX(0.1deg) scaleX(1) translateY(-10px);
transform: skewX(0.1deg) scaleX(1) translateY(-10px);
}
100% {
-webkit-transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
transform: skewX(0.1deg) scaleX(0.95) translateY(10px);
}
}
#-webkit-keyframes breath2_orig {
0% {
-webkit-transform: skewX(-10deg) scaleX(1);
transform: skewX(-10deg) scaleX(1);
}
100% {
-webkit-transform: skewX(-10deg) scaleX(0.95);
transform: skewX(-10deg) scaleX(0.95);
}
}
#keyframes breath2_orig {
0% {
-webkit-transform: skewX(-10deg) scaleX(1);
transform: skewX(-10deg) scaleX(1);
}
100% {
-webkit-transform: skewX(-10deg) scaleX(0.95);
transform: skewX(-10deg) scaleX(0.95);
}
}
/*# sourceMappingURL=buttons.css.map */
<div class="container">
<button class="button ice">Button</button>
</div>
Sorry for the long snippet (my first contribution :) )