I need these glowing bubbles to move around smoothly like galaxies in a universe.
There are four bubbles here just moving up, I can't seem to make them move in rounds like a galaxy scaling(1) from center and while moving to the right-top and going into deep space and decrease scaling(0.3) and while moving to the right direction, "something like that".
How do we do this in pure css?
The glowing bubbles code
body {
background: #26323e;
}
#keyframes greenPulse {
0% {
box-shadow: 0 0 30px #4bbec8
}
50% {
box-shadow: 0 0 80px #4bbec8
}
100% {
box-shadow: 0 0 30px #4bbec8
}
}
#-webkit-keyframes greenPulse {
0% {
-webkit-box-shadow: 0 0 30px #4bbec8
}
50% {
-webkit-box-shadow: 0 0 80px #4bbec8
}
100% {
-webkit-box-shadow: 0 0 30px #4bbec8
}
}
#-moz-keyframes greenPulse {
0% {
-moz-box-shadow: 0 0 30px #4bbec8
}
50% {
-moz-box-shadow: 0 0 80px #4bbec8
}
100% {
-moz-box-shadow: 0 0 30px #4bbec8
}
}
#-o-keyframes greenPulse {
0% {
-o-box-shadow: 0 0 30px #4bbec8
}
50% {
-o-box-shadow: 0 0 80px #4bbec8
}
100% {
-o-box-shadow: 0 0 30px #4bbec8
}
}
#keyframes bubbleUp {
0% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 0
}
1% {
bottom: 110px;
-webkit-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-webkit-transform: scale(.8);
opacity: 1
}
95% {
bottom: 545px;
-webkit-transform: scale(.3);
opacity: 1
}
99% {
bottom: 550px;
-webkit-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 0
}
}
#-webkit-keyframes bubbleUp {
0% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 0
}
1% {
bottom: 110px;
-webkit-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-webkit-transform: scale(.8);
opacity: 1
}
95% {
bottom: 545px;
-webkit-transform: scale(.3);
opacity: 1
}
99% {
bottom: 550px;
-webkit-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 0
}
}
#-moz-keyframes bubbleUp {
0% {
bottom: 110px;
-moz-transform: scale(.9);
opacity: 0
}
1% {
bottom: 110px;
-moz-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-moz-transform: scale(.8);
opacity: 1
}
95% {
bottom: 545px;
-moz-transform: scale(.3);
opacity: 1
}
99% {
bottom: 550px;
-moz-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-moz-transform: scale(.9);
opacity: 0
}
}
#-o-keyframes bubbleUp {
0% {
bottom: 110px;
-o-transform: scale(.9);
opacity: 0
}
1% {
bottom: 110px;
-o-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-o-transform: scale(.8);
opacity: 1
}
95% {
bottom: 545px;
-o-transform: scale(.3);
opacity: 1
}
99% {
bottom: 550px;
-o-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-o-transform: scale(.9);
opacity: 0
}
}
#keyframes bubbleUp1 {
0% {
bottom: 120px;
transform: scale(.3);
opacity: 0
}
1% {
bottom: 80px;
transform: scale(.2);
opacity: 0
}
30% {
bottom: 90px;
transform: scale(.2);
opacity: 1
}
95% {
bottom: 500px;
transform: scale(.4);
opacity: 1
}
99% {
bottom: 550px;
transform: scale(.2);
opacity: 0
}
100% {
bottom: 140px;
transform: scale(.9);
opacity: 0
}
}
#-webkit-keyframes bubbleUp1 {
0% {
bottom: 120px;
-webkit-transform: scale(.3);
opacity: 0
}
1% {
bottom: 80px;
-webkit-transform: scale(.2);
opacity: 0
}
30% {
bottom: 90px;
-webkit-transform: scale(.2);
opacity: 1
}
95% {
bottom: 500px;
-webkit-transform: scale(.4);
opacity: 1
}
99% {
bottom: 550px;
-webkit-transform: scale(.2);
opacity: 0
}
100% {
bottom: 140px;
-webkit-transform: scale(.9);
opacity: 0
}
}
#-moz-keyframes bubbleUp1 {
0% {
bottom: 120px;
-moz-transform: scale(.3);
opacity: 0
}
1% {
bottom: 80px;
-moz-transform: scale(.2);
opacity: 0
}
30% {
bottom: 90px;
-moz-transform: scale(.2);
opacity: 1
}
95% {
bottom: 500px;
-moz-transform: scale(.4);
opacity: 1
}
99% {
bottom: 550px;
-moz-transform: scale(.2);
opacity: 0
}
100% {
bottom: 140px;
-moz-transform: scale(.9);
opacity: 0
}
}
#-o-keyframes bubbleUp1 {
0% {
bottom: 120px;
-o-transform: scale(.3);
opacity: 0
}
1% {
bottom: 80px;
-o-transform: scale(.2);
opacity: 0
}
30% {
bottom: 90px;
-o-transform: scale(.2);
opacity: 1
}
95% {
bottom: 500px;
-o-transform: scale(.4);
opacity: 1
}
99% {
bottom: 550px;
-o-transform: scale(.2);
opacity: 0
}
100% {
bottom: 140px;
-o-transform: scale(.9);
opacity: 0
}
}
#keyframes bubbleUp2 {
0% {
bottom: 110px;
transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
transform: scale(.9);
opacity: 1
}
95% {
bottom: 650px;
transform: scale(.3);
opacity: 1
}
99% {
bottom: 655px;
transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
transform: scale(1);
opacity: 0
}
}
#-webkit-keyframes bubbleUp2 {
0% {
bottom: 110px;
-webkit-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-webkit-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 1
}
95% {
bottom: 650px;
-webkit-transform: scale(.3);
opacity: 1
}
99% {
bottom: 655px;
-webkit-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-webkit-transform: scale(1);
opacity: 0
}
}
#-moz-keyframes bubbleUp2 {
0% {
bottom: 110px;
-moz-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-moz-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-moz-transform: scale(.9);
opacity: 1
}
95% {
bottom: 650px;
-moz-transform: scale(.3);
opacity: 1
}
99% {
bottom: 655px;
-moz-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-moz-transform: scale(1);
opacity: 0
}
}
#-o-keyframes bubbleUp2 {
0% {
bottom: 110px;
-o-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-o-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-o-transform: scale(.9);
opacity: 1
}
95% {
bottom: 650px;
-o-transform: scale(.3);
opacity: 1
}
99% {
bottom: 655px;
-o-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-o-transform: scale(1);
opacity: 0
}
}
#keyframes bubbleUp3 {
0% {
bottom: 110px;
transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
transform: scale(.9);
opacity: 1
}
95% {
bottom: 495px;
transform: scale(.3);
opacity: 1
}
99% {
bottom: 500px;
transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
transform: scale(1);
opacity: 0
}
}
#-webkit-keyframes bubbleUp3 {
0% {
bottom: 110px;
-webkit-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-webkit-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 1
}
95% {
bottom: 495px;
-webkit-transform: scale(.3);
opacity: 1
}
99% {
bottom: 500px;
-webkit-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-webkit-transform: scale(1);
opacity: 0
}
}
#-moz-keyframes bubbleUp3 {
0% {
bottom: 110px;
-moz-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-moz-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-moz-transform: scale(.9);
opacity: 1
}
95% {
bottom: 495px;
-moz-transform: scale(.3);
opacity: 1
}
99% {
bottom: 500px;
-moz-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-moz-transform: scale(1);
opacity: 0
}
}
#-o-keyframes bubbleUp3 {
0% {
bottom: 110px;
-o-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-o-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-o-transform: scale(.9);
opacity: 1
}
95% {
bottom: 495px;
-o-transform: scale(.3);
opacity: 1
}
99% {
bottom: 500px;
-o-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-o-transform: scale(1);
opacity: 0
}
}
#keyframes bubbleUp4 {
0% {
bottom: 110px;
transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
transform: scale(.9);
opacity: 1
}
95% {
bottom: 595px;
transform: scale(.3);
opacity: 1
}
99% {
bottom: 600px;
transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
transform: scale(1);
opacity: 0
}
}
#-webkit-keyframes bubbleUp4 {
0% {
bottom: 110px;
-webkit-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-webkit-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-webkit-transform: scale(.9);
opacity: 1
}
95% {
bottom: 595px;
-webkit-transform: scale(.3);
opacity: 1
}
99% {
bottom: 600px;
-webkit-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-webkit-transform: scale(1);
opacity: 0
}
}
#-moz-keyframes bubbleUp4 {
0% {
bottom: 110px;
-moz-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-moz-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-moz-transform: scale(.9);
opacity: 1
}
95% {
bottom: 595px;
-moz-transform: scale(.3);
opacity: 1
}
99% {
bottom: 600px;
-moz-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-moz-transform: scale(1);
opacity: 0
}
}
#-o-keyframes bubbleUp4 {
0% {
bottom: 110px;
-o-transform: scale(1);
opacity: 0
}
1% {
bottom: 110px;
-o-transform: scale(.3);
opacity: 0
}
30% {
bottom: 110px;
-o-transform: scale(.9);
opacity: 1
}
95% {
bottom: 595px;
-o-transform: scale(.3);
opacity: 1
}
99% {
bottom: 600px;
-o-transform: scale(3);
opacity: 0
}
100% {
bottom: 110px;
-o-transform: scale(1);
opacity: 0
}
}
div#beaker {
width: 300px;
height: 700px;
margin: 0 auto;
position: relative
}
div#beaker span.glow {
width: 100%;
height: 100%;
background: ##222;
position: relative;
display: block;
border-radius: 200px;
animation: greenPulse 2s infinite;
-webkit-animation: greenPulse 2s infinite;
-moz-animation: greenPulse 2s infinite;
-o-animation: greenPulse 2s infinite;
}
div#beaker span.bubble {
background: #fff;
width: 80px;
height: 80px;
position: absolute;
display: block;
left: 110px;
bottom: 110px;
border-radius: 100px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, rgba(75, 190, 200, 0), rgba(75, 190, 200, .1), rgba(75, 190, 200, .3), rgba(255, 255, 255, .7));
background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75, 190, 200, .2)), to(rgba(255, 255, 255, .7)));
background: gradient(center 45deg, circle closest-corner, rgba(75, 190, 200, 0), rgba(75, 190, 200, .1), rgba(75, 190, 200, .3), rgba(255, 255, 255, .7));
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(9, 133, 167, 0.1) 51%, rgba(9, 133, 167, 0.3) 71%, rgba(9, 133, 167, .7) 100%);
animation: bubbleUp 4s infinite ease-in-out;
-webkit-animation: bubbleUp 4s infinite ease-in-out;
-o-animation: bubbleUp 4s infinite ease-in-out;
-moz-animation: bubbleUp 4s infinite ease-in-out;
}
div#beaker span.bubble1 {
background: #fff;
width: 70px;
height: 70px;
position: absolute;
display: block;
left: 115px;
bottom: 110px;
border-radius: 80px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, rgba(75, 190, 200, 0), rgba(75, 190, 200, .1), rgba(75, 190, 200, .3), rgba(255, 255, 255, .7));
background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75, 190, 200, .2)), to(rgba(255, 255, 255, .7)));
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(9, 133, 167, 0.1) 51%, rgba(9, 133, 167, 0.3) 71%, rgba(9, 133, 167, .7) 100%);
animation: bubbleUp 5s infinite;
-webkit-animation: bubbleUp1 5s infinite;
-o-animation: bubbleUp1 5s infinite;
-moz-animation: bubbleUp1 5s infinite;
}
div#beaker span.bubble2 {
background: #fff;
width: 30px;
height: 30px;
position: absolute;
display: block;
left: 110px;
bottom: 110px;
border-radius: 60px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, rgba(75, 190, 200, 0), rgba(75, 190, 200, .1), rgba(75, 190, 200, .3), rgba(255, 255, 255, .7));
background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75, 190, 200, .2)), to(rgba(255, 255, 255, .7)));
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(9, 133, 167, 0.1) 51%, rgba(9, 133, 167, 0.3) 71%, rgba(9, 133, 167, .7) 100%);
animation: bubbleUp 7s infinite;
-webkit-animation: bubbleUp2 7s infinite;
-o-animation: bubbleUp2 7s infinite;
-moz-animation: bubbleUp2 7s infinite;
}
div#beaker span.bubble3 {
background: #fff;
width: 50px;
height: 50px;
position: absolute;
display: block;
left: 140px;
bottom: 95px;
border-radius: 100px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, rgba(75, 190, 200, 0), rgba(75, 190, 200, .1), rgba(75, 190, 200, .3), rgba(255, 255, 255, .7));
background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75, 190, 200, .2)), to(rgba(255, 255, 255, .7)));
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(9, 133, 167, 0.1) 51%, rgba(9, 133, 167, 0.3) 71%, rgba(9, 133, 167, .7) 100%);
animation: bubbleUp 10s infinite;
-webkit-animation: bubbleUp3 10s infinite;
-o-animation: bubbleUp3 10s infinite;
-moz-animation: bubbleUp3 10s infinite;
}
div#beaker span.bubble4 {
background: #fff;
width: 40px;
height: 40px;
position: absolute;
display: block;
left: 155px;
bottom: 110px;
border-radius: 100px;
background: -moz-radial-gradient(center 45deg, circle closest-corner, rgba(75, 190, 200, 0), rgba(75, 190, 200, .1), rgba(75, 190, 200, .3), rgba(255, 255, 255, .7));
background: -webkit-gradient(radial, center center, 0, center center, 100, from(rgba(75, 190, 200, .2)), to(rgba(255, 255, 255, .7)));
background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(9, 133, 167, 0.1) 51%, rgba(9, 133, 167, 0.3) 71%, rgba(9, 133, 167, .7) 100%);
animation: bubbleUp4 12s infinite;
-webkit-animation: bubbleUp4 12s infinite;
-o-animation: bubbleUp4 12s infinite;
-moz-animation: bubbleUp4 12s infinite;
}
<div id="lab">
<div id="beaker">
<span class="bubble"><span class="glow"></span></span>
<span class="bubble1"><span class="glow"></span></span>
<span class="bubble2"><span class="glow"></span></span>
<span class="bubble3"><span class="glow"></span></span>
<span class="bubble4"><span class="glow"></span></span>
</div>
</div>
My jsfiddle https://jsfiddle.net/pbged09z/
Related
I'm trying to set up a ripple effect when a button is clicked.
I have done so successfully, however it is only working in Google Chrome's browser and I'm not sure why. The effect does not show up in Safari or FireFox (have not tested IE).
Demo:
https://jsfiddle.net/uwa67xff/5/
HTML:
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
CSS:
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
* { box-sizing:border-box; }
In your CSS code there is some properties that have no working standard and may never become standard(transform, #keyframes). To overcome this we use Vendor Prefixes(-webkit, -moz).
To know more go here
With vendor prefixes code
* { box-sizing:border-box; }
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
-webkit-transform: scale(1, 1) translate(-50%);
-moz-transform: scale(1, 1) translate(-50%);
-ms-transform: scale(1, 1) translate(-50%);
-o-transform: scale(1, 1) translate(-50%);
transform: scale(1, 1) translate(-50%);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
opacity: 1;
}
20% {
-webkit-transform: scale(25, 25);
-moz-transform: scale(25, 25);
-ms-transform: scale(25, 25);
-o-transform: scale(25, 25);
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(40, 40);
-moz-transform: scale(40, 40);
-ms-transform: scale(40, 40);
-o-transform: scale(40, 40);
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
-webkit-animation: ripple 1s ease-out;
-moz-animation: ripple 1s ease-out;
-o-animation: ripple 1s ease-out;
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
what prefixes are needed for a newer CSS property. go here
You need to add -webkit- for safari and chrome, -moz- for mozila and -o- for opera browser
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: green;
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 100%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-webkit-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-moz-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
#-o-keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
button:focus{
outline: none;
}
* { box-sizing:border-box; }
<p><b>NOTE:</b> This ripple effect is only working on Chrome browser.</p>
<button>Click Me</button>
I have this div with two spans inside, I made loader which has circle filling with red color, over and over again. Everything is working great in Chrome but on EGDE this circle is so buggy that makes no sense.
When I inspect it on EDGE I get everything stricken through for a span, transform, animation... But when I check it on Can I use, it says that every browser is compatible. Is there any prefix or anything that can fix this problem on edge. I tried to put compatibility meta tag in HEAD, doesn't work.
HTML
<section>
<div><span></span><span></span></div>
</section>
CSS
#-webkit-keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#keyframes flip {
50% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50.1% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
100% {
-webkit-transform: scale3d(-1, 1, 1);
transform: scale3d(-1, 1, 1);
}
}
#-webkit-keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#keyframes load-one {
0% {
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
49% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(179deg);
transform: translate3d(-25%, -50%, 0) rotate(179deg);
box-shadow: 0 3em 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(-25%, -50%, 0) rotate(180deg);
transform: translate3d(-25%, -50%, 0) rotate(180deg);
box-shadow: 0 3em 0 0 #fd395b;
}
}
#-webkit-keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
#keyframes load-two {
0% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
50% {
-webkit-transform: translate3d(112.5%, 50%, 0);
transform: translate3d(112.5%, 50%, 0);
box-shadow: 0 0 0 0 #fd395b;
}
75% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(179deg);
transform: translate3d(112.5%, 50%, 0) rotate(179deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
80% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
100% {
-webkit-transform: translate3d(112.5%, 50%, 0) rotate(180deg);
transform: translate3d(112.5%, 50%, 0) rotate(180deg);
box-shadow: 0 -3em 0 0 #fd395b;
}
}
section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 8em;
width: 8em;
background-color: rgba(211,211,211,0.7);
border-radius: 50%;
}
.gray-circle{
background: gray;
width: 8em;
height: 8em;
display: flex;
align-items
}
div {
width: 3em;
height: 3em;
position: relative;
border-radius: 50%;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-animation: flip 3s infinite;
animation: flip 3s infinite;
}
div span {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
overflow: hidden;
background: #fff;
}
div span:before {
content: '';
z-index: -1;
position: absolute;
background: #fd395b;
top: -50%;
bottom: -50%;
width: 400%;
}
div span:nth-of-type(1) {
border-top-right-radius: 5em;
border-bottom-right-radius: 5em;
left: 50%;
right: 0;
}
div span:nth-of-type(1):before {
right: 0;
-webkit-transform: translate3d(-25%, -50%, 0);
transform: translate3d(-25%, -50%, 0);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
animation: load-one 1.5s cubic-bezier(1, 0, 1, 1) infinite alternate;
}
div span:nth-of-type(2) {
border-top-left-radius: 5em;
border-bottom-left-radius: 5em;
right: 50%;
left: 0;
}
div span:nth-of-type(2):before {
right: 50%;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
animation: load-two 1.5s cubic-bezier(0, 0.65, 0.35, 1) infinite alternate;
}
Codepen
Unfortunately certain webkit functions do not currently work on Edge. You can submit a feature request here: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer
Although certain webkit functions have supposedly been in development since 2016 and still have yet to be properly implemented into the browser.
The output above the button which is text inclosed in brackets the problem is its a moving word but it's not getting placed in proper position insted it's going up and down.
I have used animated button which works fine bu the text in the brackets is scrolling as per the
need. Though i've tried a lot but not geting the desired answer
.background {
background-color: darkorange;
width: 100%;
height: 100%;
position: absolute;
}
.first{
color: orange;
text-align: center;
position: fixed;
left: 0%;
right: 0%;
z-index: 9999;
margin-left: 40px;
margin-right: 20px;
margin-top: 250px;
}
<!-- for button patrs css code -->
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<!-- For body parts css codes -->
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}
.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.content__container:before {
content: '[';
left: 0;
}
.content__container:after {
content: ']';
position: absolute;
right: 0;
}
.content__container:after, .content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
margin: 0;
}
#-webkit-keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes change {
0%, 12.66%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,62.64% {
-webkit-transform: translate3d(0, -75%, 0);
transform: translate3d(0, -75%, 0);
}
66.64%,79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
83.3%,95.96% {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
}
#keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes change {
0%, 12.66%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16.66%, 29.32% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -25%, 0);
}
33.32%,45.98% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
49.98%,62.64% {
-webkit-transform: translate3d(0, -60%, 0);
transform: translate3d(0, -60%, 0);
}
66.64%,79.3% {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -40%, 0);
}
83.3%,95.96% {
-webkit-transform: translate3d(0, -25%, 0);
transform: translate3d(0, -20%, 0);
}
}
<html>
<link rel="stylesheet" href="stylesheet.css">
<div class="background"></div>
<body>
<div class="content">
<div class="content__container">
<div class="content__container">
<p class="content__container__text">
Hello
</p>
<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>
<button class="button"><span>Login</span></button>
<button class="button"><span>Register</span></button>
</div>
</body>
</html>
<!-- end snippet -->
I think you want something like this :
.background {
background-color: darkorange;
width: 100%;
height: 100%;
position: absolute;
}
.first{
color: orange;
text-align: center;
position: fixed;
left: 0%;
right: 0%;
z-index: 9999;
margin-left: 40px;
margin-right: 20px;
margin-top: 250px;
}
<!-- for button patrs css code -->
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 10px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<!-- For body parts css codes -->
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 160px;
overflow: hidden;
font-family: 'Lato', sans-serif;
font-size: 35px;
line-height: 40px;
color: #ecf0f1;
}
.content__container {
font-weight: 600;
overflow: hidden;
height: 40px;
padding: 0 40px;
}
.content__container:before {
content: '[';
left: 0;
}
.content__container:after {
content: ']';
position: absolute;
right: 0;
}
.content__container:after, .content__container:before {
position: absolute;
top: 0;
color: #16a085;
font-size: 42px;
line-height: 40px;
-webkit-animation-name: opacity;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: opacity;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.content__container__text {
display: inline;
float: left;
margin: 0;
}
.content__container__list {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-webkit-animation-name: change;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: change;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.content__container__list__item {
line-height: 40px;
margin: 0;
}
#-webkit-keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#-webkit-keyframes change {
0%,15%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 40% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
50%,65% {
-webkit-transform: translate3d(0, -63%, 0);
transform: translate3d(0, -63%, 0);
}
75%,90% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes opacity {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes change {
0%,15%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 40% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
50%,65% {
-webkit-transform: translate3d(0, -63%, 0);
transform: translate3d(0, -63%, 0);
}
75%,90% {
-webkit-transform: translate3d(0, -30%, 0);
transform: translate3d(0, -30%, 0);
}
100%{
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<div class="background"></div>
<body>
<div class="content">
<div class="content__container">
<div class="content__container">
<p class="content__container__text">
Hello
</p>
<ul class="content__container__list">
<li class="content__container__list__item">world !</li>
<li class="content__container__list__item">users !</li>
<li class="content__container__list__item">everybody !</li>
</ul>
</div>
</div>
<button class="button"><span>Login</span></button>
<button class="button"><span>Register</span></button>
</div>
A spinner I want to use on my site looks bad on Firefox (48.0.2).
Comparison between Firefox and Chrome (imgur)
See the spinner live (Third spinner)
Is there a fix for this rendering issue?
Slowing the animation down didn't help so I'm turning to you guys (:D) and I don't think there is a fix for this yet on stackoverflow.
Here is code demonstrating the problematic spinner:
body {
background: #0dc5c1;
}
.loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #0dc5c1;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loader">Loading...</div>
Tested on Firefox, Chrome, Edge and IE(11). Only Firefox has problems.
body {
background: #0dc5c1;
}
.loader {
font-size: 10px;
margin: 50px auto;
/*text-indent: -9999em;*/
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load 1.4s infinite linear;
animation: load 1.4s infinite linear;
/* -webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #0dc5c1;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loader"></div>
I've placed a profile picture div over my hero image. As i resize the window the profile pic moves. I've tried fixed, relative, absolute...nothing works. Any Ideas - thanks, adolfo - site: http://adolfobarreto.atwebpages.com/
html:
<div id="heroimage">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="profilepicture"></div>
<div class="module mid">
<h2> Adolfo Barreto </h2>
<h4> Web Designer </h4>
</div>
</div>
css:
// Hero
html, body, #heroimage{
width:100%;
height:80%;
}
#heroimage{
background:url('/../assets/img/heroVector.jpg') center center;
background-size:cover;
}
#import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
.mid h2 {
background-color: #7A3E48;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
margin: 0;
position: absolute;
top: 40%;
left: 50.5%;
font-size: 2rem;
transform: translate(-50%, -50%);
}
.mid h4 {
background-color: #7A3E48;
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: white;
margin: 0;
position: absolute;
top: 44%;
left: 50.5%;
font-size: 1.5rem;
transform: translate(-50%, -50%);
}
//end hero
// profile picture
.profilepicture {
position: absolute;
width: 180px;
height: 180px;
margin: 0px;
margin-top: 10%;
margin-left: 44.6%;
background: url(/../assets/img/AdolfoBarreto.4.jpg) no-repeat;
background-size: 180px 180px;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 3;
-webkit-box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px rgba(0,0,255,.2);
-moz-box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px rgba(0,0,255,.2);
box-shadow:
0 0 0 10px rgba(255,255,255,.2),
0 0 5px 2px rgba(0,0,0,.3),
inset 0 0 0 10px rgba(0,0,255,.2);
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
/* border-radius: 50% has issues on some mobile browsers */
}
.pulse1 {
position: absolute;
width: 200px;
height: 200px;
margin-top: 9.5%;
margin-left: 44%;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 1;
opacity: 0;
border: 3px solid rgba(255,255,255,.1);
-webkit-animation: pulsejg1 4s linear infinite;
-moz-animation: pulsejg1 4s linear infinite;
animation: pulsejg1 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, .6);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.pulse2 {
position: absolute;
width: 200px;
height: 200px;
margin-top: 9.5%;
margin-left: 44%;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 2;
opacity: 0;
border: 1px solid rgba(255,255,255,0);
-webkit-animation: pulsejg2 4s linear infinite;
-moz-animation: pulsejg2 4s linear infinite;
animation: pulsejg2 4s linear infinite;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
-webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .8);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#-webkit-keyframes pulsejg1 {
0% {
-webkit-transform: scale(.6);
opacity: 0;
}
50% {
-webkit-transform: scale(.6);
opacity: 0;
}
60% {
-webkit-transform: scale(.9);
opacity: .2;
}
70% {
-webkit-transform: scale(1.1);
opacity: .35;
}
80% {
-webkit-transform: scale(1.25);
opacity: .2;
}
100% {
-webkit-transform: scale(1.4);
opacity: 0;
}
}
#-moz-keyframes pulsejg1 {
0% {
-moz-transform: scale(.6);
opacity: 0;
}
50% {
-moz-transform: scale(.6);
opacity: 0;
}
60% {
-moz-transform: scale(.9);
opacity: .2;
}
70% {
-moz-transform: scale(1.1);
opacity: .35;
}
80% {
-moz-transform: scale(1.25);
opacity: .2;
}
100% {
-moz-transform: scale(1.4);
opacity: 0;
}
}
#keyframes pulsejg1 {
0% {
transform: scale(.6);
opacity: 0;
}
50% {
transform: scale(.6);
opacity: 0;
}
60% {
transform: scale(.9);
opacity: .1;
}
70% {
transform: scale(1.1);
opacity: .25;
}
80% {
transform: scale(1.25);
opacity: .1;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
#-webkit-keyframes pulsejg2 {
0% {
-webkit-transform: scale(.6);
opacity: 0;
}
40% {
-webkit-transform: scale(.8);
opacity: .05;
}
50% {
-webkit-transform: scale(1);
opacity: .1;
}
60% {
-webkit-transform: scale(1.1);
opacity: .3;
}
80% {
-webkit-transform: scale(1.2);
opacity: .1;
}
100% {
-webkit-transform: scale(1.3);
opacity: 0;
}
}
#-moz-keyframes pulsejg2 {
0% {
-moz-transform: scale(.6);
opacity: 0;
}
40% {
-moz-transform: scale(.8);
opacity: .05;
}
50% {
-moz-transform: scale(1);
opacity: .1;
}
60% {
-moz-transform: scale(1.1);
opacity: .3;
}
80% {
-moz-transform: scale(1.2);
opacity: .1;
}
100% {
-moz-transform: scale(1.3);
opacity: 0;
}
}
#keyframes pulsejg2 {
0% {
transform: scale(.6);
opacity: 0;
}
40% {
transform: scale(.8);
opacity: .05;
}
50% {
transform: scale(1);
opacity: .1;
}
60% {
transform: scale(1.1);
opacity: .3;
}
80% {
transform: scale(1.2);
opacity: .1;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
// end profile picture
You used % value for margins its why when you re-size your browser, your picture move. Use instead margin: 0px auto to always keep it on middle and % top to always keep it 20 % from top no mater what screen size you device have. I guess you want this picture to be placed exactly on middle. Its how your code should looks like:
.profilepicture
{
position: absolute;
width: 180px;
height: 180px;
margin: 0px auto;
top: 20%;
left: 0;
right: 0;
bottom: 0;
background: url(/../assets/img/AdolfoBarreto.4.jpg) no-repeat;
background-size: 180px 180px;
z-index: 3;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2), 0 0 5px 2px rgba(0, 0, 0, 0.3), inset 0 0 0 10px rgba(0, 0, 255, 0.2);
border-radius: 999px;}
Same thing with this animation which you placed there. By this, you will keep image always on middle.
You have used margin-top: 10%; and margin-left: 44.6%; as percentage that causes to move the picture when the window resizes. Change it to pixels, and you can also remove left margins and add margin: auto; instead.
Change:
.profilepicture {
margin-top: 10%;
margin-left: 44.6%;
}
To:
.profilepicture {
margin: auto;
}