I am trying to create a animation with the help of four boxes, each of the square should change opacity one by one to make a loading type animation, I tried with CSS, but not able to achieve, can anyone help with this CSS animation?
Here is the working JSfiddle
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.block-1 {
top: 0;
left: 0;
background:#0076aa;
}
.block-2 {
top: 0;
right: 0;
background:#98bd81;
}
.block-3 {
bottom: 0;
right: 0;
background:#98bd81;
}
.block-4 {
bottom: 0;
left: 0;
background:#0076aa;
}
li.block-1 {
animation-delay: 222ms;
}
li.block-2 {
animation-delay: 444ms;
}
li.block-3 {
animation-delay: 666ms;
}
li.block-4 {
animation-delay: 888ms;
}
#keyframes dance {
to {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
}
<div class='wrapper'>
<ul class='blocks'>
<li class='block-1'></li>
<li class='block-2'></li>
<li class='block-3'></li>
<li class='block-4'></li>
</ul>
</div>
This is after fixing your code:
#-webkit-keyframes dance {
from {
opacity: 1
}
to {
opacity: 0.1
}
}
li.block-1 {
animation: dance 1s infinite;
animation-delay: 222ms;
animation-direction: alternate;
}
Here is the JSFiddle demo
You can fine tune the value to your preference :)
You need to add the animation call to your li elements otherwise it wont run.
Using the animation shorthand property you can achieve this.
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
animation: dance 888ms infinite alternate;
}
.block-1 {
top: 0;
left: 0;
background:#0076aa;
}
.block-2 {
top: 0;
right: 0;
background:#98bd81;
}
.block-3 {
bottom: 0;
right: 0;
background:#98bd81;
}
.block-4 {
bottom: 0;
left: 0;
background:#0076aa;
}
li.block-1 {
animation-delay: 222ms;
}
li.block-2 {
animation-delay: 444ms;
}
li.block-3 {
animation-delay: 666ms;
}
li.block-4 {
animation-delay: 888ms;
}
#keyframes dance {
from {
opacity: 1;
}
to {
opacity: 0.2;
}
}
<div class='wrapper'>
<ul class='blocks'>
<li class='block-1'></li>
<li class='block-2'></li>
<li class='block-3'></li>
<li class='block-4'></li>
</ul>
</div>
this worked for me..
body, html {
width: 100%;
height: 100%;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.block-1 {
top: 0;
left: 0;
background:#0076aa;
}
.block-2 {
top: 0;
right: 0;
background:#98bd81;
}
.block-3 {
bottom: 0;
right: 0;
background:#98bd81;
}
.block-4 {
bottom: 0;
left: 0;
background:#0076aa;
}
li.block-1 {
animation: dance 1.5s ease-out infinite;
animation-delay: 0.91s;
}
li.block-2 {
animation: dance 1.5s ease-out infinite;
animation-delay: 1.54s;
}
li.block-3 {
animation: dance 1.5s ease-out infinite;
animation-delay: 1.77s;
}
li.block-4 {
animation: dance 1.5s ease-out infinite;
animation-delay: 1.99s;
}
#keyframes dance {
50%{
opacity: 0;
}
}
Just set opacity: 0 property in your animation like so:
https://jsfiddle.net/60jnk66d/6/
body,
html {
width: 100%;
height: 100%;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius:50%;
}
.block-1 {
top: 0;
left: 0;
background: #0076aa;
}
.block-2 {
top: 0;
right: 0;
background: #98bd81;
}
.block-3 {
bottom: 0;
right: 0;
background: #98bd81;
}
.block-4 {
bottom: 0;
left: 0;
background: #0076aa;
}
li.block-1 {
animation: dance 1s infinite;
animation-delay: 222ms;
animation-direction: alternate;
}
li.block-2 {
animation: dance 1s infinite;
animation-delay: 444ms;
animation-direction: alternate;
}
li.block-3 {
animation: dance 1s infinite;
animation-delay: 666ms;
animation-direction: alternate;
}
li.block-4 {
animation: dance 1s infinite;
animation-delay: 888ms;
animation-direction: alternate;
}
#keyframes dance {
from {
opacity: 1
}
to {
opacity: 0.1
}
}
#-webkit-keyframes dance {
from {
opacity: 1
}
to {
opacity: 0.1
}
}
<div class='wrapper'>
<ul class='blocks'>
<li class='block-1'></li>
<li class='block-2'></li>
<li class='block-3'></li>
<li class='block-4'></li>
</ul>
</div>
Try It
Related
I tried to use animated loader but unable to rotate as key frames are not working
i {
height: 2em;
width: 2em;enter code here
border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: spin 2s ease infinite;
}
i:before,
i:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: spin 2s ease infinite;
-webkit-animation: spin 2s ease infinite;
-moz-animation: spin 2s ease infinite;
}
i:before {
left: -2.3em;
}
i:after {
left: 2.3em;
}
#-moz-keyframes spin {
0% {
top: 0;
-moz-transform: rotate(0deg);
}
50% {
top: -4em;
-moz-transform: rotate(-180deg);
}
100% {
top: 0;
-moz-transform: rotate(-360deg);
}
}
#-webkit-keyframes spin {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
50% {
top: -4em;
-webkit-transform: rotate(-180deg);
}
100% {
top: 0;
-webkit-transform: rotate(-360deg);
}
}
#keyframes spin {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: -4em;
transform: rotate(-180deg);
}
100% {
top: 0;
transform: rotate(-360deg);
}
}
I think u need to add a "." before "i", if "i" is your div class name
→ CodePen Example with your code working
-HTML
<div class="i">ANIMATION</div>
-CSS
.i {
height: 2em;
width: 2em;
enter code here border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: spin 2s ease infinite;
}
.i:before, i:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: spin 2s ease infinite;
-webkit-animation: spin 2s ease infinite;
-moz-animation: spin 2s ease infinite;
}
.i:before {
left: -2.3em;
}
.i:after {
left: 2.3em;
}
#-moz-keyframes spin {
0% {
top: 0;
-moz-transform: rotate(0deg);
}
50% {
top: -4em;
-moz-transform: rotate(-180deg);
}
100% {
top: 0;
-moz-transform: rotate(-360deg);
}
}
#-webkit-keyframes spin {
0% {
top: 0;
-webkit-transform: rotate(0deg);
}
50% {
top: -4em;
-webkit-transform: rotate(-180deg);
}
100% {
top: 0;
-webkit-transform: rotate(-360deg);
}
}
#keyframes spin {
0% {
top: 0;
transform: rotate(0deg);
}
50% {
top: -4em;
transform: rotate(-180deg);
}
100% {
top: 0;
transform: rotate(-360deg);
}
}
Greetings!
Spin class was causing the issue so I changed the class name. Now working perfectly fine.
.loader {
height: 10px;
width: 10px;
border-radius: 100%;
background: #fff;
display: block;
margin: 10em auto;
position: absolute;
left: 50%;
animation: example 2s ease infinite;
margin-top: 25%;
}
.loader:before,
.loader:after {
content: "";
display: block;
position: absolute;
height: inherit;
width: inherit;
background: inherit;
border-radius: inherit;
animation: example 2s ease infinite;
}
.loader:before {
left: -1.2em;
}
.loader:after {
left: 1.2em;
}
#keyframes example {
0% {
transform: rotate(0deg);
top: 0;
}
50% {
transform: rotate(-180deg);
top: -2em;
}
100% {
transform: rotate(-360deg);
top: 0;
}
}
I need to create this animation
1: https://i.stack.imgur.com/FVvJQ.gif
Original animation is above link, the code must be like that.
Could you please help me with that.
I cannot make correct animation , here is my full code.
Here is my current code.
(.........................................................................................................................................................................................................................................................................................................................)
body {
background-color: #01143B;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.8;
}
25% {
opacity: .4;
}
50% {
transform: scale(1.4);
opacity: 0.8;
}
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 200px;
}
div:nth-child(1) {
animation: pulse 3s infinite;
}
div:nth-child(2) {
animation: pulse 4s infinite .5s;
}
div:nth-child(3) {
animation: pulse 5s infinite .7s;
}
img {
position: absolute;
margin-left: 70px;
margin-top: 65px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
.circle {
background-color: white;
}
<div></div>
<div></div>
<div></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have added a class to each individual DIV to work when built into a design.
It is necessary to have a separate animation timing for each circle
I hope I've been helpful
body {
background-color: #01143B;
}
img {
position: absolute;
margin-left: 43px;
margin-top: 43px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.1;
}
#keyframes pulse_1 {
10% { transform: scale(1); }
20% { transform: scale(0.95); }
30% { transform: scale(1); }
}
.circle {
background-color: white;
animation: pulse_1 3s infinite 1s;
width: 150px;
height: 150px;
opacity: 1;
}
#keyframes pulse_ca {
15% { transform: scale(1); }
25% { transform: scale(0.95); }
35% { transform: scale(1); }
}
div.ca {
width: 180px;
height: 180px;
animation: pulse_ca 3s infinite 1s;
}
#keyframes pulse_cb {
20% { transform: scale(1); }
30% { transform: scale(0.95); }
40% { transform: scale(1); }
}
div.cb {
width: 210px;
height: 210px;
animation: pulse_cb 3s infinite 1s;
}
#keyframes pulse_cc {
25% { transform: scale(1); }
35% { transform: scale(0.95); }
45% { transform: scale(1); }
}
div.cc {
width: 240px;
height: 240px;
animation: pulse_cc 3s infinite 1s;
}
<div class="cc"></div>
<div class="cb"></div>
<div class="ca"></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have created a div with animation direction to the right side but I want that the image inside will stay stright and will not move.
The problem is that the image is getting the direction of the main div.
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box {
width: 50px;
height: 50px;
background: #1d80e1;
animation: animate .5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
In this case, I've used reverse flow. you can customize animate2. animate2 .5s infinite linear reverse;
#loader {
/* Uncomment this to make it run! */
/*
animation: loader 5s linear infinite;
*/
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
}
#keyframes loader {
0% {
left: -100px
}
100% {
left: 110%;
}
}
#box:after {
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
background-size: 50px;
background-position: center;
background-image: url("https://picsum.photos/id/10/80/80");
background-repeat: no-repeat;
animation: animate2 .5s infinite linear reverse;
}
#box {
animation: animate .5s infinite linear;
width: 50px;
height: 50px;
background: #1d80e1;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
width: 80px;
height: 80px;
}
#keyframes animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
#keyframes animate2 {
17% {
}
25% {
transform:rotate(22.5deg);
}
50% {
transform:rotate(45deg);
}
75% {
transform:rotate(67.5deg);
}
100% {
transform:rotate(90deg);
}
}
#shadow {
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow .5s linear infinite;
}
#keyframes shadow {
50% {
transform: scale(1.2, 1);
}
}
body {
background: #e4e4e4;
overflow: hidden;
}
h4 {
position: absolute;
bottom: 20px;
left: 20px;
margin: 0;
font-weight: 200;
opacity: .5;
font-family: sans-serif;
color: #fff;
}
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
I am trying to build a donut chart with css. I am observing that it is unable to rotate more than 180 degrees. Am I missing anything.
This stops me to show donut chart for any data which is more than 50%.
http://jsfiddle.net/BkJY7/80/
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(360deg); }
}
You are missing the keyframes for rotate-lt.
Also, some minor adjustments on the angles:
body {
margin: 50px;
}
.spinner {
width: 250px;
height: 250px;
background: #aaa;
margin: 0 auto;
position: relative;
}
.spinner:after {
position: absolute;
content: "";
width: 0%;
height: 0%;
border-radius: 100%;
background: #fff;
top: 10%;
left: 10%;
}
.spinner span em {
background: #0e728e;
-webkit-animation-duration: 6s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner {
border-radius: 100%;
position: relative;
}
.spinner span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner span:first-child {
left: 0;
}
.spinner span:last-child {
left: 50%;
}
.spinner span em {
border-radius: 250px;
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
.spinner span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 50%;
}
.spinner span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 50%;
}
<div class="spinner">
<span><em></em></span>
<span><em></em></span>
</div>
I would try to use this from css-tricks to achieve what you want:
https://codepen.io/HugoGiraudel/pen/BHEwo
Tutorial:
https://css-tricks.com/css-pie-timer/
html:
<div class="wrapper">
<div class="pie spinner"></div>
<div class="pie filler"></div>
<div class="mask"></div>
</div>
css:
.wrapper {
position: relative;
margin: 40px auto;
background: white;
}
.wrapper, .wrapper * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 250px;
height: 250px;
}
.wrapper .pie {
width: 50%;
height: 100%;
transform-origin: 100% 50%;
position: absolute;
background: #08C;
border: 5px solid rgba(0,0,0,0.5);
}
.wrapper .spinner {
border-radius: 100% 0 0 100% / 50% 0 0 50%;
z-index: 200;
border-right: none;
animation: rota 5s linear infinite;
}
.wrapper:hover .spinner,
.wrapper:hover .filler,
.wrapper:hover .mask {
animation-play-state: running;
}
.wrapper .filler {
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
left: 50%;
opacity: 0;
z-index: 100;
animation: opa 5s steps(1, end) infinite reverse;
border-left: none;
}
.wrapper .mask {
width: 50%;
height: 100%;
position: absolute;
background: inherit;
opacity: 1;
z-index: 300;
animation: opa 5s steps(1, end) infinite;
}
#keyframes rota {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes opa {
0% {
opacity: 1;
}
50%, 100% {
opacity: 0;
}
}
Also you can check this out also nice tutorial:
http://javabeat.net/pie-chart-css3-html/
Keep in mind I take no credit for writing this code, just helpin.
you add keyframe only for rotate-rt that why its rotate half
add a keyframe for rotate-lt so get the better result
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(360deg); }
}
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>