This is the fiddle.I have searched a solution for this but didn't find one. The correct one should be the one in Chrome/Opera/Safari. I want to show only the image from top to bottom.
The HTML:
<div class="container">
<img class="image" src="http://www.hotel-aramis.com/slider/home/notre-dame-de-paris.jpg" />
</div>
The CSS:
#-webkit-keyframes pan {
0% {
-webkit-transform: translate(0%, 0%);
}
100% {
top: 100%;
-webkit-transform: translate(0%, -100%);
}
}
#keyframes pan {
0% {
-webkit-transform: translate(0%, 0%);
}
100% {
top: 100%;
-webkit-transform: translate(0%, -100%);
}
}
.container {
position:relative;
width:1100px;
height:480px;
overflow:hidden;
background-color:#000;
}
.image {
position:absolute;
top: 0;
max-width:100%;
min-width:100%;
-webkit-animation: pan 5s alternate infinite linear;
animation: pan 5s alternate infinite linear;
}
Firefox doesn't use webkit why your -webkit-transform will do nothing. Change it to transform and it should most likely work.
I made a JSFiddle for you
#-webkit-keyframes pan {
0% {
-webkit-transform: translate(0%, 0%);
}
100% {
top: 100%;
-webkit-transform: translate(0%, -100%);
}
}
#keyframes pan {
0% {
transform: translate(0%, 0%);
}
100% {
top: 100%;
transform: translate(0%, -100%);
}
}
Related
I'm trying to use CSS animations to animate a cube rotating, and pausing on each face for a set amount of time.
Pen here
#keyframes frontToLeft {
75% { transform: rotateY(0); }
100% { transform: rotateY(90deg); }
}
#keyframes leftToBack {
75% { transform: rotateY(90deg); }
100% { transform: rotateY(180deg); }
}
#keyframes backToRight {
75% { transform: rotateY(180deg); }
100% { transform: rotateY(270deg); }
}
#keyframes rightToFront {
75% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.cube-container {
padding-top: 200px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.qube {
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation-name: frontToLeft, leftToBack, backToRight, rightToFront;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: 2s, 2s, 2s, 2s;
animation-delay: 2s, 4s, 6s, 8s;
* {
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
}
<div class="cube-container">
<div class="qube">
<div class="front">front</div>
<div class="left">left</div>
<div class="back">back</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</div>
In Google Chrome and Edge, the animation seems to glitch, but in Firefox it works as intended.
I'd like the outcome to be:
Front Face - Pause 2 seconds, rotate 2 seconds
Left Face - Pause 2 seconds, rotate 2 seconds
Back Face - Pause 2 seconds, rotate 2 seconds
Right Face - Pause 2 seconds, rotate 2 seconds
Can anyone see where this would be going wrong? I have the Codepen preprocessing SCSS with prefixes.
Thanks in advance!
From what I can tell testing this it looks like a bug. Nothing I've tried seems to work to correct the animation. Like you say, Firefox works as expected.
All I can think of as a potential fix is to combine it into one animation something like this:
#keyframes spinCube {
20% { transform: rotateY(0deg); }
25% { transform: rotateY(90deg); }
45% { transform: rotateY(90deg); }
50% { transform: rotateY(180deg); }
70% { transform: rotateY(180deg); }
75% { transform: rotateY(270deg); }
95% { transform: rotateY(270deg); }
100% { transform: rotateY(360deg); }
}
.qube {
animation: spinCube 8s 1 forwards;
}
It would take a bit of tweaking to get the timing right, but it's the only thing I can think of.
Here's a CodePen Example of this alternative solution.
So I tried to add a simple vibration animation to a link from my website but it simply doesn't work. Anyone see anything wrong with my code?
I took the animation code from animista.net and there they were working
Here is my code:
a {
text-decoration: none;
animation: vibrate 1s linear infinite both;
}
#keyframes vibrate {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
Drop me a line and let’s do cool things together!
You can set position: absolute or change display value to block-level (because a is inline by default) for transform to work.
a {
text-decoration: none;
display: block; /* Or inline-block */
animation: vibrate 1s linear infinite both;
}
#keyframes vibrate {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
Drop me a line and let’s do cool things together!
The CSS animation is not used to target anchor.
so please use div for easy animation effects
<!DOCTYPE html>
<html>
<head>
<style>
.div {
text-decoration: none;
position:relative;
animation:vibrate 1s linear infinite both;
}
#keyframes vibrate {
0% {
transform: translate(0,0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
</style>
</head>
<body>
<div class="div">
Drop me a line and let’s do cool things together!
</div>
</body>
</html>
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;
So i'm working on a kind of solar system page. what i try to do is when a person clicks on a planet it redirects them to page. But for some reason it doesn't work. It's like the anchor doesn't exist. i tried to animate the anchor tag with the image but that doesn't seem to work.
THE HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<!-- content to be placed inside <body>…</body> -->
<div id="one"><a id="aone" href="http://google.com"><img src="one.png"></a></div>
<div id="two"><img src="two.png"></div>
<div id="three"></div>
</body>
</html>
THE CSS
body{
position: absolute;
top: 50%; left: 50%;
margin: -150px;
border: dashed 1px;
width: 300px; height: 300px;
border-radius: 50%;
content: '';
}
#one {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
animation: rot1 8s infinite linear;
-webkit-animation: rot1 8s infinite linear;
}
#-webkit-keyframes rot1 {
0% { -webkit-transform: rotate(0deg) translate(300px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#keyframes rot1 {
0% { transform: rotate(0deg) translate(300px) rotate(0deg); }
100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#two {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot2 34s infinite linear;
-webkit-animation: rot2 34s infinite linear;
}
#-webkit-keyframes rot2 {
0% { -webkit-transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(150px) rotate(-360deg); }
}
#keyframes rot2 {
0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
100% { transform: rotate(360deg) translate(300px) rotate(-360deg); }
}
#three {
text-align: center;
position: absolute;
top: 50%; left: 50%;
margin: -25px;
width: 50px; height: 50px;
background:
linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%),
rgba(0,0,255,.3) linear-gradient(90deg,
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot3 34s infinite linear;
-webkit-animation: rot3 34s infinite linear;
}
#-webkit-keyframes rot3 {
0% { -webkit-transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { -webkit-transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
#keyframes rot3 {
0% { transform: rotate(0deg) translate(50px) rotate(0deg); }
100% { transform: rotate(360deg) translate(50px) rotate(-360deg); }
}
http://jsfiddle.net/DJsU9/
I don't know if it's possible to move the real anchor position (not just the graphics position) using the CSS transform property but there's an incredibly easy solution for this question without the use of javascript:
You can create three invisible circles, put links on each one and then position them over the existing animation. This method is good because even if the user clicks in the wrong position the link will work.
Note that I've colored the circles with transparent red, but you can (and should) remove the color by deleting the background:rgba(255,0,0,0.5); lines.
Here's the relevant CSS:
.circle1{
display:block;
position:absolute;
top:50%;
margin-top:-325px;
left:50%;
margin-left:-325px;
width:650px;
height:650px;
background:rgba(255,0,0,0.5); /* unnecessary */
border-radius:100%;
}
.circle2{
display:block;
position:absolute;
top:50%;
margin-top:-175px;
left:50%;
margin-left:-175px;
width:350px;
height:350px;
background:rgba(255,0,0,0.5); /* unnecessary */
border-radius:100%;
}
HTML:
<div id="one"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/one.png"></a>
</div>
<div id="two"><a id="aone" href="http://google.com"><img src="http://dedobbelaere.sisamul.com/two.png"></a>
</div>
<div id="three"></div>
<a class="circle1" href="http://dedobbelaere.sisamul.com/two.png"></div>
<a class="circle2" href="http://google.com"></div>
JSFiddle
Only corrected sintax on nested html element, tested on IE10 and Chrome35(Windows 8 Pro), but probably you need to fix some platform/cross-browser issue.
Anyway you should set an unique id to your hyperlinks
http://jsfiddle.net/InferOn/DJsU9/11/
HTML
<div id="one">
<a id="aone" target="_blank" href="http://google.com">
<img src="http://dedobbelaere.sisamul.com/one.png"/>
</a>
</div>
<div id="two">
<a id="aone" target="_blank" href="http://google.com">
<img src="http://dedobbelaere.sisamul.com/two.png"/>
</a>
</div>
<div id="three"></div>
CSS
/**
* Prevent an element to rotate itself in a circular CSS3 animation
* http://stackoverflow.com/q/14057780/1397351
*/
a {
border: 1px solid red;
}
body {
position: absolute;
top: 50%;
left: 50%;
margin: -150px;
border: dashed 1px;
width: 300px;
height: 300px;
border-radius: 50%;
content:'';
}
#one {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin: -25px;
width: 50px;
height: 50px;
animation: rot1 8s infinite linear;
-webkit-animation: rot1 8s infinite linear;
}
#-webkit-keyframes rot1 {
0% {
-webkit-transform: rotate(0deg) translate(300px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
#keyframes rot1 {
0% {
transform: rotate(0deg) translate(300px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
#two {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin: -25px;
width: 50px;
height: 50px;
transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot2 34s infinite linear;
-webkit-animation: rot2 34s infinite linear;
}
#-webkit-keyframes rot2 {
0% {
-webkit-transform: rotate(0deg) translate(150px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(150px) rotate(-360deg);
}
}
#keyframes rot2 {
0% {
transform: rotate(0deg) translate(150px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(300px) rotate(-360deg);
}
}
#three {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin: -25px;
width: 50px;
height: 50px;
background: linear-gradient(transparent 49%, black 49%, black 51%, transparent 51%), rgba(0, 0, 255, .3) linear-gradient(90deg, transparent 49%, black 49%, black 51%, transparent 51%);
animation: rot3 34s infinite linear;
-webkit-animation: rot3 34s infinite linear;
}
#-webkit-keyframes rot3 {
0% {
-webkit-transform: rotate(0deg) translate(50px) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) translate(50px) rotate(-360deg);
}
}
#keyframes rot3 {
0% {
transform: rotate(0deg) translate(50px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(50px) rotate(-360deg);
}
}
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;