I can't get to vertical align my preloader svg. Is displayed below that 50% height of the screen. The dark border represents the 50% of the screen so is just for demo purpose.
Any help is appreciated.
jsfiddle demo
body,
html {
height: 100%;
}
.demo-square1 {
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing: border-box;
position: absolute;
top: 0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: inline-block;
left: 50%;
position: absolute;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
#-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
#keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
Keyframes outer's transform property overriding .preloader's transform property, You can use top: calc(50% - 17px); or transform: rotate(360deg) translate(-50%, -50%);.
body,
html {
height: 100%;
}
.demo-square1 {
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing: border-box;
position: absolute;
top: 0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: inline-block;
left: 50%;
position: absolute;
top: calc(50% - 17px);
bottom: 50%;
transform: translate(-50%, -50%);
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
#-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
#keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
You should update your css and use flex to get the same
Working fiddle fiddle code
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
display:flex; /* Add this */
justify-content:center; /* Add this */
align-items:center; /* Add this */
flex-flow:column nowrap; /* Add this */
position:relative; /* Add this */
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: block;
position: absolute; /* Add this and remove top, bottom, left and transform */
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
body, html {
height: 100%;
padding:0px;
margin:0px;
}
.demo-square1{
height: 50%;
width: 100%;
border-bottom: 1px solid #333333;
box-sizing:border-box;
position:absolute;
top:0;
}
.preloader-box {
height: 100%;
left: 0;
top: 0;
width: 100%;
z-index: 999999;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
position:relative;
}
.preloader {
height: 35px;
width: 35px;
font-size: 0;
display: block;
position: absolute;
-webkit-animation: outer 6600ms linear infinite;
animation: outer 6600ms linear infinite;
}
.preloader svg {
-webkit-animation: inner 1320ms linear infinite;
animation: inner 1320ms linear infinite;
}
.preloader svg circle {
fill: none;
stroke: #448AFF;
stroke-linecap: square;
-webkit-animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
animation: arc 1320ms cubic-bezier(0.8, 0, 0.4, 0.8) infinite;
}
#-webkit-keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes outer {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#keyframes inner {
0% {
-webkit-transform: rotate(-100.8deg);
transform: rotate(-100.8deg);
}
100% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
}
#-webkit-keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
#keyframes arc {
0% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: 0;
}
40% {
stroke-dasharray: 151.55042961px, 210.48670779px;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1 210.48670779px;
stroke-dashoffset: -151.55042961px;
}
}
<div class="preloader-box">
<div class="preloader"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="35" width="35" viewbox="0 0 75 75"><circle cx="37.5" cy="37.5" r="33.5" stroke-width="8"/></svg></div>
</div>
<div class="demo-square1"></div>
Related
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.
I am trying to animate a SVG from 0deg to 360deg. But if i use the transform: rotate property then the svg loses its position and its not centre aligned when the browser resizes. I used transform-origin to 50%. But the svg loses its position.
HTML :
<div id="hexagon-spinner">
<Hexagon className="hexagon-loader" viewBox="0 0 65.103 75.174" />
</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
}
.hexagon-loader {
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
First of all, when it is 100%, you should define 360 degrees, not 359 degrees.
100% {
transform: rotate(359deg); // ->> 360deg
}
What to do about the average,
#keyframes spin {
0% {
transform: rotate(0deg);
transform-origin: -50% 50%;
}
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Finally,
If we need to shorten the code (since it will start with 0deg by default), if we enter only the parameter 100%, there will be no problem.
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
Simple Code Snippet
#keyframes spin {
100% {
transform: rotate(360deg);
transform-origin: -50% 50%;
}
}
div {
position: absolute;
top: 50%;
left: 50%;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: -50% 50%;
}
<div>LOADING</div>
#hexagon-spinner {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 9999;
display: flex;
align-items:center;
justify-content: center;
}
.hexagon-loader {
background-color: purple;
height: 40px;
width: 40px;
animation-name: spin;
animation-duration: 0.8s;
/* Things added */
animation-iteration-count: infinite;
display: inline-block;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
<div id="hexagon-spinner">
<div class="hexagon-loader"></div>
</div>
When we shift the element with the translate (to center it) we naturally distort its center. Therefore it will not work properly.
I suggest a solution for this. (flexbox) is to use. You will see an example below.
Note: (Don't forget to remove Absolute and Transform Origin features)
I've found a pure CSS banner slider that is works good in code pen. I've copied the code of HTML and CSS into one page but it does not work. All of the images are external and they available. It has no any Js or etc just html and css. You may see it perfectly works here CSS only slideshow Help me please.
<head>
</head>
<style>
.wrapper {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.slideshow {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
&--hero {
z-index: 3;
left: 0;
top: 50%;
// width: 100%;
height: 85%;
transform: translateY(-50%) skewY(-10deg);
transform-origin: center;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
.slides {
position: absolute;
left: 0;
top: -10%;
width: 100vw;
height: 100vh;
animation: 11s slideshow-hero-mobile -3s infinite;
}
.slide1 {
background-image: url(2.jpg);
animation: 20s slides-set-1 -0.1s infinite;
}
.slide2 {
background-image: url(3.jpg);
animation: 20s slides-set-2 -0.1s infinite;
}
.slide3 {
background-image: url(4.jpg);
animation: 20s slides-set-3 -0.1s infinite;
}
#media (min-width: 600px) {
left: 50%;
top: 0;
width: 67%;
height: 100%;
transform: translateX(-50%) skewX(-10deg);
.slides {
top: 0;
left: -25%;
height: 100%;
animation: 11s slideshow-hero -3s infinite;
}
}
}
&--contrast {
z-index: 1;
width: 100%;
height: 50%;
transform: none;
.slide {
filter: blur(3px);
}
&--before {
left: 0;
.slides {
width: 100vw;
}
}
&--after {
z-index: 2;
left: auto;
right: 0;
.slides {
width: 100vw;
left: auto;
right: 0;
}
}
.slides {
animation: 14s slideshow-contrast -5s infinite;
}
.slide1 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(200,75,80,0.5) 100%), url(https://source.unsplash.com/1000x750);
// background-image: url(../img/slideshow/hero-1.jpg);
animation: 20s slides-set-1 -0.2s infinite;
}
.slide2 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1001x751);
// background-image: url(../img/slideshow/hero-2.jpg);
animation: 20s slides-set-2 -0.2s infinite;
}
.slide3 {
background-image: linear-gradient(to bottom, rgba(100,100,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1002x752);
// background-image: url(../img/slideshow/hero-3.jpg);
animation: 20s slides-set-3 -0.2s infinite;
}
&--after {
top: auto;
bottom: 0;
.slides {
animation: 13s slideshow-contrast -13s infinite;
}
.slide {
background-position: right;
}
.slide1 {
animation: 20s slides-set-1 infinite;
}
.slide2 {
animation: 20s slides-set-2 infinite;
}
.slide3 {
animation: 20s slides-set-3 infinite;
}
}
#media (min-width: 600px) {
width: 50%;
height: 100%;
&--after {
top: 0;
bottom: auto;
.slides {
width: 50vw;
}
}
}
}
}
.slides,
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#keyframes slideshow-hero-mobile {
0% {
transform: scale(1) skewY(10deg);
}
50% {
transform: scale(1.05) skewY(10deg);
}
100% {
transform: scale(1) skewY(10deg);
}
}
#keyframes slideshow-hero {
0% {
transform: scale(1) skewX(10deg);
}
50% {
transform: scale(1.05) skewX(10deg);
}
100% {
transform: scale(1) skewX(10deg);
}
}
#keyframes slideshow-contrast {
0% {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
#keyframes slides-set-1 {
0% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
31% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
34% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
97% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
100% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
}
#keyframes slides-set-2 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
31% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
34% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
64% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
67% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
#keyframes slides-set-3 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
64% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
67% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
97% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
</style>
<html>
<body>
asdasd
<div class="wrapper">
<div class="slideshows">
<div class="slideshow slideshow--hero">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--before">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--after">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try adding this css link.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/8.0.0/sanitize.min.css">
Also this is a SCSS codepen, not css. If you want the css to work you have to convert it
https://jsonformatter.org/scss-to-css
Your html
tag needs to be at the start of your code for the css part to function properly .
I have a problem regarding the positioning of my container.
Keeping the styles whilst removing the position: absolute; on the .dot seems to be proving rather tricky and with each attempt the dots are going all over the place!
To clarify, I'm looking at being able to move the entire loader
.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
}
.loader {
display: inline-block;
float: left;
margin-left:100px;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
#keyframes animateDot1 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(180deg) translateX(-12px); }
75% { transform: rotate(180deg) translateX(-12px); }
100% { transform: rotate(360deg) translateX(-12px); }
}
#keyframes animateDot2 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(-180deg) translateX(-12px); }
75% { transform: rotate(-180deg) translateX(-12px); }
100% { transform: rotate(-360deg) translateX(-12px); }
}
#keyframes animateDot3 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(180deg) translateX(12px); }
75% { transform: rotate(180deg) translateX(12px); }
100% { transform: rotate(360deg) translateX(12px); }
}
#keyframes animateDot4 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(-180deg) translateX(12px); }
75% { transform: rotate(-180deg) translateX(12px); }
100% { transform: rotate(-360deg) translateX(12px); }
}
<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
you need to set position:relative to parent, otherwise it will be out of the DOM flow.
As for my tests you don't need the .loader CSS
.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
position: relative;
background: lightblue;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 15px 8px
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
#keyframes animateDot1 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(180deg) translateX(-12px);
}
75% {
transform: rotate(180deg) translateX(-12px);
}
100% {
transform: rotate(360deg) translateX(-12px);
}
}
#keyframes animateDot2 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(-180deg) translateX(-12px);
}
75% {
transform: rotate(-180deg) translateX(-12px);
}
100% {
transform: rotate(-360deg) translateX(-12px);
}
}
#keyframes animateDot3 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(180deg) translateX(12px);
}
75% {
transform: rotate(180deg) translateX(12px);
}
100% {
transform: rotate(360deg) translateX(12px);
}
}
#keyframes animateDot4 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(-180deg) translateX(12px);
}
75% {
transform: rotate(-180deg) translateX(12px);
}
100% {
transform: rotate(-360deg) translateX(12px);
}
}
<div style="float:left">Deleting 'Folder Name' folder</div>
<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>
I`m working on an animated heart only with CSS.
I want it to pulse 2 times, take a small break, and then repeat it again.
What I have now:
small ==> big ==> small ==> repeat animation
What I'm going for:
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
How can I do it?
My code :
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
-webkit-transition: opacity 7s ease-in-out;
-moz-transition: opacity 7s ease-in-out;
-o-transition: opacity 7s ease-in-out;
transition: opacity 7s ease-in-out;}
#keyframes heartFadeInOut {
0% {
opacity:1;
}
14% {
opacity:1;
}
28% {
opacity:0;
}
42% {
opacity:0;
}
70% {
opacity:0;
}
}
#heart img.top {
animation-name: heartFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
<img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>
See also this Fiddle.
You can incorporate the pause into the animation. Like so:
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
Working example:
https://jsfiddle.net/t7f97kf4/
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
div
{
background-color: red;
width: 50px;
height: 50px;
animation: heartbeat 1s infinite;
}
<div>
Heart
</div>
Edit:
Working example with pure CSS heart shape:
https://jsfiddle.net/qLfg2mrd/
#keyframes heartbeat
{
0%
{
transform: scale( .75);
}
20%
{
transform: scale( 1);
}
40%
{
transform: scale( .75);
}
60%
{
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100%
{
transform: scale( .75);
}
}
#heart
{
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
}
#heart:before,
#heart:after
{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after
{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart"></div>
Pulse 2 times, take a small break, and then repeat it again
Try this. Going with animation opacity is a bad choice. transform: scale() will do the job.
.heart:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'icons';
font-size: 21px;
text-indent: 0;
font-variant: normal;
line-height: 21px;
}
.heart {
position: relative;
width: 500px;
overflow: inherit;
margin: 50px auto;
list-style: none;
-webkit-animation: animateHeart 2.5s infinite;
animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
top: 0;
left: 50%;
width: 120px;
height: 200px;
background: red;
border-radius: 100px 100px 0 0;
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 26%;
-webkit-transform: rotate(45deg) translateZ(0);
transform: rotate(45deg) translateZ(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
#-webkit-keyframes animateHeart {
0% {
-webkit-transform: scale(0.8);
}
5% {
-webkit-transform: scale(0.9);
}
10% {
-webkit-transform: scale(0.8);
}
15% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(0.8);
}
}
#keyframes animateHeart {
0% {
transform: scale(0.8);
}
5% {
transform: scale(0.9);
}
10% {
transform: scale(0.8);
}
15% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
span {
font-family: 'Cantora One', sans-serif;
font-size: 64px;
position: absolute;
top: 165px;
}
<div class="heart">
</div>
I like ketan's answer, but I wanted to improve the heart animation to make it more realistic.
A heart does not double in size when it beats. 10% change in size looks better to me.
I like it getting both larger and smaller
When it stops moving altogether it looks dead to me. Even when it isn't beating, it needs to expand or contract a little
I removed the "alternate directions" code so that it runs the same way through every time
I explicitly have the heart start end and at normal scale (1) and have the animation in the middle of the sequence. It seems clearer that way to me.
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#keyframes heartFadeInOut {
0% {transform: scale(1);}
25% {transform: scale(.97);}
35% {transform: scale(.9);}
45% {transform: scale(1.1);}
55% {transform: scale(.9);}
65% {transform: scale(1.1);}
75% {transform: scale(1.03);}
100% {transform: scale(1);}
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 2s;
}
<div id="heart" >
<img class="bottom" src="https://i.stack.imgur.com/iBCpb.png" width="100px">
</div>
Based on various comments and making use of the ♥ we'll get this:
body {
font-size: 40pt;
color: red;
}
#keyframes heartbeat {
0% {
font-size: .75em;
}
20% {
font-size: 1em;
}
40% {
font-size: .75em;
}
60% {
font-size: 1em;
}
80% {
font-size: .75em;
}
100% {
font-size: .75em;
}
}
div {
animation: heartbeat 1s infinite;
}
<div>
♥
</div>
body{
margin: 0;
padding: 0;
background: #1f1f1f;
}
body:before
{
position: absolute;
content: '';
left: 50%;
width: 50%;
height: 100%;
background: rgba(0,0,0,.2);
}
.center
{
position: absolute;
top:50%;
left: 50%;
background: #1f1f1f;
transform: translate(-50%,-50%);
padding: 100px;
border: 5px solid white;
border-radius: 100%;
box-shadow:20px 20px 45px rgba(0,0,0,.4);
z-index: 1;
overflow: hidden;
}
.heart
{
position: relative;
width: 100px;
height: 100px;
background:#ff0036;
transform: rotate(45deg) translate(10px,10px);
animation: ani 1s linear infinite;
}
.heart:before
{
content: '';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
top:-50%;
left:0;
border-radius: 50%;
}
.heart:after
{
content:'';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
bottom:0;
right:50%;
border-radius: 50%;
}
.center:before
{
content: '';
position: absolute;
top:0;
left:-50%;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#keyframes ani{
0%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
25%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
30%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
50%{
transform: rotate(45deg) translate(10px,10px) scale(1.2);
}
70%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
90%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
100%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HeartBeat Animation</title>
<link rel="stylesheet" href="Style.css" type="text/css">
</head>
<body>
<div class="center">
<div class="heart">
</div>
</div>
</body>
</html>
Output
for more: Heart Beating Animation
I think this is what you want for your image animation. There is no need of top image. Just use bottom.
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#keyframes heartFadeInOut {
0%
{ transform: scale( .5 ); }
20%
{ transform: scale( 1 ); }
40%
{ transform: scale( .5 ); }
60%
{ transform: scale( 1 ); }
80%
{ transform: scale( .5 ); }
100%
{ transform: scale( .5 ); }
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 1.5s;
animation-direction: alternate;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>
I needed this for a project I was working on. I was trying to make it look as realistic as possible, and this is what I came up with.
#keyframes heartbeat {
0% {
transform: scale( .95 );
}
20% {
transform: scale( .97 );
}
30% {
transform: scale( .95 );
}
40% {
transform: scale( 1 );
}
100% {
transform: scale( .95 );
}
}
animation: heartbeat 1s infinite;