In the animation below the transform is animated correctly, but the left and top properties are not. Why is this?
.element-animation {
background-color: yellow;
width: 30px;
height: 30px;
animation: animationFrames ease 2s;
animation-iteration-count: infinite;
}
#keyframes animationFrames {
0% {
left: 0px;
top: 0px;
opacity: 1;
transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
25% {
left: 0px;
top: -90px;
}
75% {
left: 200px;
top: -90px;
}
100% {
left: 200px;
top: 0px;
opacity: 1;
transform: rotate(0deg) scaleX(2) scaleY(2) skewX(45deg) skewY(45deg);
}
}
<div class="element-animation"></div>
Your animation relies on positioning, therefore you have to add a position property:
.element-animation{
position:relative;
}
.element-animation {
background-color: yellow;
width: 30px;
height: 30px;
animation: animationFrames ease 2s;
animation-iteration-count: 1;
position: relative;
}
#keyframes animationFrames {
0% {
left: 0px;
top: 0px;
opacity: 1;
transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
25% {
left: 0px;
top: -90px;
}
75% {
left: 200px;
top: -90px;
}
100% {
left: 200px;
top: 0px;
opacity: 1;
transform: rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
<div class="element-animation"></div>
For older browsers you may need to add the -webkit- prefix for the animation property. Check browser compatibility over on caniuse.com
You should copy all the code for every Browser. not just standard.
so it should contain the following stuff
-webkit-animation: animationFrames linear 0.7s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: ;
see in http://jsfiddle.net/KxM68/8/
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 make an animation of a moving car from left to right and then hide the picture and another one of the same, but from right to left.
Can someone help me with this?
This is my code for now:
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% {
left: 0;
}
50% {
left: calc(100% - 100px);
}
100% {
left: 0;
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">
Place the image in a div that has overflow.
Animate over transform: rotateY and left.
I used a div with a car emoticon, instead of an image.
.car-movement {
overflow: hidden;
font-size: 40px;
height: 50px;
}
.car-movement > .car {
position: relative;
display: inline-block;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
#keyframes run {
0% {
transform: rotateY(180deg);
left: -100px;
}
50% {
transform: rotateY(180deg);
left: 100%;
}
51% {
transform: rotateY(0deg);
left: calc(100% + 100px);
}
100% {
transform: rotateY(0deg);
left: -100px;
}
<div class="car-movement">
<div class="car">🚕</div>
</div>
If I understood correctly, you want that car would ride from left to right and hide on the right side of the window?
Then you should edit this code part:
0% {
left: -100px;
}
50% {
left: calc(100% - 100px);
}
Instead of 100px write car image length.
Also before all code, you should write this for the body:
body {
overflow-x: hidden;
}
.car-movement {
position: absolute;
top: 65%;
left: 0;
-webkit-animation: linear infinite;
-webkit-animation-name: run;
-webkit-animation-duration: 5s;
}
#-webkit-keyframes run {
0% {
left: 0;
}
48% {
-webkit-transform: rotateY(0deg);
}
50% {
left: calc(100% - 100px);
-webkit-transform: rotateY(180deg);
}
98% {
-webkit-transform: rotateY(180deg);
}
100% {
left: 0;
-webkit-transform: rotateY(0deg);
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">
If you give your keyframes a couple of intermediate steps you can not only get the car going from left to right and back again but you can get it to turn round before doing the right to left bit.
Obviously you need to put in your car svg image to get the full effect.
.car-movement {
position: absolute;
top: 65%;
left: 0;
animation: linear infinite;
animation-name: run;
animation-duration: 5s;
}
#keyframes run {
0% {
left: 0;
transform: translate(-100%);
}
50% {
left: 100%;
transform: translate(0);
}
50.5% {
transform: rotateY(180deg) translate(0);
}
99.5% {
left: 0;
transform: rotateY(180deg) translate(0);
}
100% {
transform: rotateY(0deg) translate(0);
}
}
<img class="car-movement" src="/assets/img/1car.svg" alt="car">
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`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;
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>