I am working on circular progress bar using HTML & CSS. HTML content is under for loop. Here, I tried with same 5% but the result of progress is different
.progress{
width: 120px;
height: 120px;
line-height: 120px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 15px solid #f2f5f5;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 100%;
height: 100%;
font-size: 14px;
font-weight: bold;
text-align: center;
position: absolute;
}
.progress .progress-value.red {
color: #f74d4d;
}
.progress .progress-value.dark-yellow {
color: #f78c4d;
}
.progress .progress-value.yellow {
color: #f7f24d;
}
.progress .progress-value.green {
color: #28b779;
}
.progress.red .progress-bar{
border-color: #f74d4d;
}
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-bar{
border-color: #f78c4d;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color:#f7f24d;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #28b779;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
.progress > span {
background-color: none;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="component-progress-info">
<div class="component-progress">
<div class="progress <?php echo $componentclass; ?>">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value red">5%</div>
</div>
</div>
<div class="component-info">
</div>
</div>
I have html inside a for-loop. But it is resulting me different response
Looking at the CSS (just the relevant parts):
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
Different colors are set to use different keyframes, for example loading-3 for yellow, loading-5 for green, as seen above.
The keyframes then are defined with different rotations. Looking at two of them as an example:
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
Here loading-2 transforms from 0deg to 144deg.
Below loading-3 transforms from 0deg to 90deg.
Should the keyframes not be the same for every progress bar? Only the background color should change. But you define different keyframes for different colors, which is probably the cause if not part of it.
Related
I have two circles with pulse animation infinite times. Now I need animating the circle one after another continuously with infinite times. I tried pulsation the circle infinite times. I have added delay animation but it is not working I don't why. Please kindly refer the code and help to achieve that functionality:
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
Css:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
thanks in advance
You can add the same class to all circles for common properties. The only properties you need different for each is animation-delay.
You can use a small jQuery code to set that for any number of divs. I have created an example for 3 divs, but feel free to extend it.
let els = $(".inner"),
length = $(".inner").length
els.each(function(index) {
$(this).css('animation-delay', (index / length) + 's')
})
.inner {
display: inline-block;
vertical-align: top;
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
margin: 10px;
animation: pulse 1s infinite linear;
}
#keyframes pulse {
0% {
transform: scaleX(1)
}
50% {
transform: scale3d(1.05, 1.05, 1.05)
}
to {
transform: scaleX(1)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
animation-delay is working:
.inner {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
text-align: center;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border: 1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 2s infinite;
animation-delay: 5s
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
<div class="inner">one
</div>
<div class="inner1">two
</div>
Only Add animation Delay= .5s; and reduce second animation time with 1s
HTML:
<div class="inner">one</div>
<div class="inner1">two</div>
CSS:
.inner {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
text-align:center;
border-radius: 50%;
margin-bottom:20px;
text-align: center;
-webkit-animation: pulse 1s infinite;
}
.inner1 {
width: 74px;
height: 74px;
background: #fff;
border:1px solid #000;
position: relative;
border-radius: 50%;
text-align: center;
-webkit-animation: pulse 1s infinite;
animation-delay: .5s;
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
#keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse
}
I am trying to animate a frame where the 'heart-flap' opens to the left. But can't seem to do it -- the axis of the box and the heart is not the same while opening.
My jsFiddle https://jsfiddle.net/dk1446/unjqx08d/2/
#import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
background-color: white;
font-family: 'Poiret One', Segoe UI Light, cursive;
}
.heart {
background-color: #d32f2f;
display: inline-block;
height: 200px;
margin: 0 10px;
position: relative;
top: 0;
/* transform: rotate(-45deg); */
width: 200px;
margin-top: 200px;
margin-left: 500px;
/* transform: rotate(0deg); */
}
.heart:before,
.heart:after {
content: "";
background-color: #d32f2f;
border-radius: 50%;
height: 200px;
position: absolute;
width: 200px;
}
.heart:before {
top: -110px;
left: 0;
}
.heart:after {
left: 110px;
top: 0;
}
#card {
margin-top: 200px;
}
#message {
height: 400px;
width: 400px;
margin-top: -410px;
margin-left: 500px;
background-color: #333;
color: white;
border: 3px dashed violet;
border-radius: 35% 0 35% 0;
}
#card #heart1 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: closeLeft 2s ease-in-out forwards;
-moz-animation: closeLeft 2s ease-in-out forwards;
-ms-animation: closeLeft 2s ease-in-out forwards;
animation: closeLeft 2s ease-in-out forwards;
}
#card:hover #heart1 {
-webkit-animation: openLeft 2s ease-in-out forwards;
-moz-animation: openLeft 2s ease-in-out forwards;
-ms-animation: openLeft 2 ease-in-out forwards;
animation: openLeft 2s ease-in-out forwards;
}
#-webkit-keyframes closeLeft {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes closeLeft {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(180deg);
}
}
#-ms-keyframes closeLeft {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(180deg);
}
}
#keyframes closeLeft {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
#-moz-keyframes openLeft {
from {
-moz-transform: rotateY(180deg);
}
to {
-moz-transform: rotateY(0deg);
}
}
#-webkit-keyframes openLeft {
from {
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-ms-keyframes openLeft {
from {
-ms-transform: rotateY(180deg);
}
to {
-ms-transform: rotateY(0deg);
}
}
#keyframes openLeft {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
<div id="card">
<div class="heart" id="heart1"></div>
<div id="message">
<h2>Happy Valentines Day</h2>
</div>
<!-- <div class="heart" id="heart2"></div> -->
</div>
I would like the 'heart' to open to the left and close right. It should be in line with the box underneath. I can't seem to figure out a way.
You almost had it! You need to add transform-origin: 0 0 to the #heart1
#import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
background-color: white;
font-family: 'Poiret One', Segoe UI Light, cursive;
}
.heart {
background-color: #d32f2f;
display: inline-block;
height: 200px;
margin: 0 10px;
position: relative;
top: 0;
/* transform: rotate(-45deg); */
width: 200px;
margin-top: 200px;
margin-left: 500px;
/* transform: rotate(0deg); */
}
.heart:before,
.heart:after {
content: "";
background-color: #d32f2f;
border-radius: 50%;
height: 200px;
position: absolute;
width: 200px;
}
.heart:before {
top: -110px;
left: 0;
}
.heart:after {
left: 110px;
top: 0;
}
#card {
margin-top: 200px;
}
#message {
height: 400px;
width: 400px;
margin-top: -410px;
margin-left: 500px;
background-color: #333;
color: white;
border: 3px dashed violet;
border-radius: 35% 0 35% 0;
}
#card #heart1 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation: closeLeft 2s ease-in-out forwards;
-moz-animation: closeLeft 2s ease-in-out forwards;
-ms-animation: closeLeft 2s ease-in-out forwards;
animation: closeLeft 2s ease-in-out forwards;
transform-origin: 0 0;
}
#card:hover #heart1 {
-webkit-animation: openLeft 2s ease-in-out forwards;
-moz-animation: openLeft 2s ease-in-out forwards;
-ms-animation: openLeft 2 ease-in-out forwards;
animation: openLeft 2s ease-in-out forwards;
}
#-webkit-keyframes closeLeft {
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes closeLeft {
from {
-moz-transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(180deg);
}
}
#-ms-keyframes closeLeft {
from {
-ms-transform: rotateY(0deg);
}
to {
-ms-transform: rotateY(180deg);
}
}
#keyframes closeLeft {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}
}
#-moz-keyframes openLeft {
from {
-moz-transform: rotateY(180deg);
}
to {
-moz-transform: rotateY(0deg);
}
}
#-webkit-keyframes openLeft {
from {
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform: rotateY(0deg);
}
}
#-ms-keyframes openLeft {
from {
-ms-transform: rotateY(180deg);
}
to {
-ms-transform: rotateY(0deg);
}
}
#keyframes openLeft {
from {
transform: rotateY(180deg);
}
to {
transform: rotateY(0deg);
}
}
<div id="card">
<div class="heart" id="heart1"></div>
<div id="message">
<h2>Happy Valentines Day</h2>
</div>
<!-- <div class="heart" id="heart2"></div> -->
</div>
Here's the fiddle: https://jsfiddle.net/disinfor/y0p2t94q/1/
Edit for more info: the default origin for an element is 50% 50% 0 - which translates to the middle of the element. 0 0 moves the point of origin to the top left corner.
More reading: https://www.w3schools.com/cssref/css3_pr_transform-origin.asp
#rorschach: finally you got the animation, but did you notice your card area yet it's not sorted out!! when you hover on the card the animation should start I guess, so I think either you set max-width to the card.
My problem is that I'm making a responsive web app, and I need a background image, where I want some dot's in div's to follow/stick to the background image. For me it dosen't matter if the background scales or just cuts the sides.
i have made a fiddle: http://jsfiddle.net/2bhk5n5y/6/
html:
<div id="map">
<div id="point1" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
<div id="point2" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
<div id="point3" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
</div>
css:
body {
background-color:#000000;}
#map {
width:100%;
height:600px;
background: url('https://treasurehuntdesign.com/wp-content/uploads/2010/09/how-to-make-a-treasure-map-9.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#point1 {
left: 20%;
top: 10%;}
#point2 {
left: 400px;
top: 150px;}
#point3 {
left: 500px;
top: 400px;}
.point-location {
position: fixed;
z-index: 2;
transform: rotateX(60deg);
-ms-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
-webkit-transform: rotateX(60deg);}
.point-dot{
width: 13px;
height: 13px;
border: 2px solid #000000;
border-radius: 30px;
background: #000000;
position: fixed;
top: 21px;
left: 21px;}
.point-pulse{
border: 5px solid #000;
background: transparent;
border-radius: 60px;
height: 50px;
width: 50px;
transform: scale(0.5);
animation: pulse 10s ease-out;
animation-iteration-count: infinite;
-ms-transform: scale(0.5);
-ms-animation: pulse 10s ease-out;
-ms-animation-iteration-count: infinite;
-moz-transform: scale(0.5);
-moz-animation: pulse 10s ease-out;
-moz-animation-iteration-count: infinite;
-webkit-transform: scale(0.5);
-webkit-animation: pulse 10s ease-out;
-webkit-animation-iteration-count: infinite;}
#keyframes pulse {
0% {
transform: scale(0);
opacity: 0.8;
}
10% {
transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
transform: scale(2);
opacity: 0;
}}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0);
opacity: 0.8;
}
10% {
-ms-transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
-ms-transform: scale(2);
opacity: 0;
}}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.8;
}
10% {
-moz-transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
-moz-transform: scale(2);
opacity: 0;
}}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
opacity: 0.8;
}
10% {
-webkit-transform: scale(2);
opacity: 0;
border: 5px solid #2b99df;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}}
Hope my question is clear enough, else just ask.
as you said it does not matter if it's cut off all you have to do is make sure the points are positioned relative to the center of the map, as you are centering the map.
.point-location
{
position: absolute;
top:50%;
left:50%;
}
http://jsfiddle.net/2bhk5n5y/7/
I have this CSS3 animation working on codepen.
HTML
<div class="heart heart1"></div>
<div class="heart heart2"></div>
CSS3
html, body{
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
.heart1{
animation: heart-anim 1s linear .4s infinite;
}
.heart2{
animation: pounding .5s linear infinite alternate;
}
.heart1:after, .heart1:before{
background-color: #ff7693;
}
#keyframes pounding{
0%{ transform: scale(1.5); }
100%{ transform: scale(1); }
}
#keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
Check it here: http://codepen.io/RadValentin/pen/sfnCE
As you can see is working ok, BUT, if I post the exact code to my local server OR to jsfiddle it does not work any more: http://jsfiddle.net/40aydbfr/
I believe the animation is not made according to the best practices since it breaks very easily.
So, Why it does not work outside of codepen and how can I make it more cross browser compatible.
PS: Im using Chrome.
It doesn't work because you are missing vendor prefixes for -webkit- browsers.
The reason why it works on codepen is because, if you click on the settings button above the CSS window, you'll see that -prefix-free is enabled, which means it adds the prefixes automatically.
Always check browser support, if something doesn't work.
Updated Codepen
Updated Fiddle
html,
body {
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart1 {
-webkit-animation: heart-anim 1s linear .4s infinite;
animation: heart-anim 1s linear .4s infinite;
}
.heart2 {
-webkit-animation: pounding .5s linear infinite alternate;
animation: pounding .5s linear infinite alternate;
}
.heart1:after,
.heart1:before {
background-color: #ff7693;
}
#-webkit-keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
#keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
<div class="heart heart1"></div>
<div class="heart heart2"></div>
I've been struggling with this for the past few days, so help would be greatly appreciated. I have a Title with a line (hr element) right below it. I'm trying to have a div centered in the hr that grows and shrinks. However, when the css3 animation is applied it causes the div to be displaced down and to the right, as if the div's top-left point (which I think is (0,0)) is set to be where the middle was.
I've created a jsfiddle to illustrate what I mean.
Here's my html:
<div id="header">
<h1>Center</h1>
<div id="action-bar">
<hr class="center-line" />
<div class="circle animation"></div>
</div>
</div>
and my css:
div#header {
color: #000;
width: 90%;
text-align: center;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
div#header h1 {
font-size: 50px;
font-weight: 300;
margin-top: 0px;
margin-bottom: 0px;
}
/* the line beneath h1 */
div #action-bar {
margin: 25px 0;
position: relative;
}
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
div.circle:hover {
width: 2em;
height: 2em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
hr.center-line {
border: 0;
height: .25em;
background: #000;
}
/* animation */
#keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
Can anybody point be in the right direction? I'm looking for a pure-css solution if possible. Thanks!
Add negative margin to your circle element, half of it's width and height:
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin-left: -0.5em;
margin-top: -0.5em;
}
div.circle:hover {
width: 2em;
height: 2em;
margin-left: -1em;
margin-top: -1em;
}
jsFiddle Demo.
Here is a smooth pulsing option.
http://jsfiddle.net/aLjsut5r/4/
/* animation */
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
.pulsing {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.5;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
}