i need book page turn Animation Effect loading screen . i created for one turn i need continuous turn how to make book like loading.
I want to implement this page turn book effect.
for loading screen.
need to add new turn page after turn one page
.cssload-thecube {
width: 96px;
height: 69px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: #000;
}
.cssload {
width: 73px;
height: 73px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: rgb(43,160,199);
}
.cssload-thecube .cssload-cube {
position: relative;
}
.cssload-thecube .cssload-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
content: "";
position: absolute;
top: -36px;
left: 15px;
width: 100%;
height: 100%;
background-color: rgb(43,160,199);
animation: cssload-fold-thecube 2.76s infinite linear both;
-o-animation: cssload-fold-thecube 2.76s infinite linear both;
-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}
<div class="cssload-thecube">
<div class="cssload-cube cssload-c2"></div>
</div>
#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}
Related
I am running into an issue in my mobile media query - anything under a 640px viewport. I have a circle that comes together and forms a full circle (see snippet), but for some reason in my media query, the circle doesn't quite line up, and I am unsure why as I am using the same math that makes it work in a desktop version.
Here is what it looks like within the 640 media query:
So how this works is I give .circle the same height and width. So let's say 200px for both height and width.
Then the class of .spinner, I divide the height and width of the .circle by two. So I would have 125px for height and width.
Then I set the border size, so lets use 5px. What I do is add that border size to the height and width numbers of .spinner and use that figure, which would be 130px to everything else ranging from .top, .bottom, q2, mask, etc.
That is how I get this to work and my math in my media query is not wrong. Does anyone see why this isn't lining up?
.blue {
background-color: blue;
width: 100%;
height: 600px;
}
.circle {
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
background: inherit;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 250px;
height: 250px;
position: absolute;
border: 5px solid #b5f2ff;
z-index: 10;
}
.top {
top: 255px;
left: 255px;
border-radius: 0 0 255px 0;
border-left: none;
border-top: none;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.bottom {
border-radius: 255px 0 0 0;
border-bottom: none;
border-right: none;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.topright,
.bottomleft {
-webkit-animation: rotate90 4s linear forwards;
animation: rotate90 4s linear forwards;
}
.topleft,
.bottomright {
-webkit-animation: rotate180 4s linear forwards;
animation: rotate180 4s linear forwards;
}
.mask {
width: 255px;
height: 255px;
position: absolute;
opacity: 1;
background: inherit;
z-index: 15;
-webkit-animation: mask 4s linear forwards;
animation: mask 4s linear forwards;
}
.q2 {
top: 0;
left: 0;
}
.q4 {
top: 255px;
left: 255px;
}
#-webkit-keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#circle-text {
display: none;
position: absolute;
color: #FFF;
font-size: 2.3em;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
#media screen and (max-width:640px) {
.circle {
z-index: 100;
width: 250px;
height: 250px;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 125px;
height: 125px;
z-index: 10;
}
.top {
top: 130px;
left: 130px;
border-radius: 0 0 130px 0;
}
.bottom {
border-radius: 130px 0 0 0;
}
.mask {
width: 130px;
height: 130px;
}
.q4 {
top: 130px;
left: 130px;
}
}
<div class="blue">
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
</div>
You have an inconsistent use of box-sizing:border-box in your CSS. It's being used in media queries, so that it doesn't apply to all screen sizes. And it would mess up your calculations.
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;
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>
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/