I have 4 cards that lay flat and "stand up" on hover however they also flip as they had a front and a back. I only want one-sided cards and I don't know how to stop them flipping. I have removed the html for the back of the card however I can't seem to stop the card flipping in CSS. What do I need to change in my code to stop them flipping?
.card-holder {
width: 90%;
height: 70%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: -370em;
text-align: center;
}
div:target .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
div:target .card-face:before {
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card {
display: inline-block;
perspective: 1000px;
position: relative;
margin: 50px;
}
.card:hover .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
.card:before{
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card-face {
display: block;
width: 139px;
height: 250px;
transform-origin: bottom;
animation: flip 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.front-card, .project-img {
width: inherit;
height: inherit;
}
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
transform-origin: bottom;
animation: shadow 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.card-face {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front-card {
/* backface-visibility: hidden; */
position: absolute;
top: 0;
left: 0;
}
/* .back-card {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
} */
.front-card {
transform: rotateY(180deg);
}
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
#keyframes shadow {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;
}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
}
/* #keyframes flip-2 {
0% {
transform: rotateX(50deg) rotateY(0deg);}
60% {
transform: rotateX(0deg); }
100% {
transform: rotateX(0deg) rotateY(180deg);}
} */
#keyframes shadow-2 {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
}
<div class="card-holder" id="all-cards">
<div class="card" id="card-1">
<a href="#card-1" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/0RUrrQF.jpg" alt="Death">
</div>
</a>
</div>
<div class="card" id="card-2">
<a href="#card-2" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/ulOYmlT.jpg" alt="Death">
</div>
</a>
</div>
</div>
remove this line line 100% {
transform: rotateX(0deg) rotateY(180deg);
} from ...
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
Related
I'm just animating a simple text, then, after some time, I want it to disappear, however, a few issues appear:
When it first fades in, you can see that the opacity value isn't respected at all, the text appears almost out of nowhere.
When it fades out, you can see that the movement is weird and the opacity transition runs after the movement.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
What gives? If I remove the second animation, everything comes back to normal.
The property opacity goes from 0 to 1, so the change is happening almost instantly. About the weird movement when leaving, seems fine to me.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
Check this code, I hope this will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation-name: showMessage;
animation-duration: 3s;
animation-delay: 500ms;
animation-direction: alternate;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -55px, 0);
}
50% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100%{
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
</style>
</head>
<body>
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
</body>
</html>
I want to display a W with an effect of fade out when my W will be written entirely.
I do not know if I got tangled in my Keyframes
.anim {
transform: rotate(90deg);
}
#global {
width: 70px;
margin: auto;
zoom: 1.9;
margin-top: 100px;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #2a6fed;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
/*transition: all 0.8s ease; */
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
.animation {
transition: all 0.3s ease;
}
#top .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite 0s backwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #2358be;
animation: trans2 3s ease-out infinite 1.5s backwards;
}
#middle-top .plane {
transform: translate3d(0px, 0, 0);
background: #2358be;
animation: trans25 3s ease-out infinite 2s backwards;
}
#bottom .plane {
z-index: 2000;
animation: trans1 3s ease-out infinite 2.6s backwards;
}
#top {
width: 53px;
height: 20px;
left: 40px;
transform: skew(15deg, 0);
z-index: 100;
top: -26px;
}
#middle-top {
width: 33px;
height: 20px;
left: 60px;
top: -10px;
transform: skew(15deg, -45deg);
}
#middle {
width: 33px;
height: 20px;
left: 60px;
top: 15px;
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
left: 40px;
top: 30px;
transform: skew(-15deg, 0);
}
#loading-texte {
color: white;
position: absolute;
top: 70px;
font-family: Arial;
text-align: center;
font-size: 12px;
}
#keyframes trans1 {
from {
transform: translate3d(-250px, 0, 0);
}
to {
transform: translate3d(53px, 0, 0);
}
}
#keyframes trans2 {
from {
transform: translate3d(33px, 0, 0);
}
to {
transform: translate3d(-250px, 0, 0);
}
}
#keyframes trans25 {
from {
transform: translate3d(-250px, 0, 0);
}
to {
transform: translate3d(33px, 0, 0);
}
}
#keyframes trans3 {
from {
transform: translate3d(53px, 0, 0);
}
to {
transform: translate3d(-250px, 0, 0);
}
}
<section id="global">
<div class="anim">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle-top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
<p id="loading-texte"><i>LOADING...</i></p>
</section>
#global {
width: 70px;
margin: auto;
margin-top: 100px;
position: relative;
cursor: pointer;
height: 60px;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.anim {
transform: rotate(90deg);
}
#top {
width: 53px;
height: 20px;
left: 40px;
transform: skew(15deg, 0);
z-index: 100;
top: -26px;
}
#middle-top {
width: 33px;
height: 20px;
left: 60px;
top: -10px;
transform: skew(15deg, -45deg);
}
#middle {
width: 33px;
height: 20px;
left: 60px;
top: 15px;
transform: skew(-15deg, 40deg);
}
#bottom {
width: 53px;
height: 20px;
left: 40px;
top: 30px;
transform: skew(-15deg, 0);
}
.plane {
background: #2a6fed;
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
animation-direction: alternate;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom .plane {
z-index: 2000;
animation-name: trans1;
}
#middle .plane {
transform: translate3d(0, 0, 0);
background: #2358be;
animation-name: trans2;
}
#middle-top .plane {
transform: translate3d(0, 0, 0);
background: #2358be;
animation-name: trans3;
}
#top .plane {
transform: translate3d(0, 0, 0);
z-index: 2000;
animation-name: trans4;
}
#keyframes trans1 {
0% {
transform: translate3d(-100%, 0, 0);
}
25% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#keyframes trans2 {
0% {
transform: translate3d(100%, 0, 0);
}
25% {
transform: translate3d(100%, 0, 0);
}
50% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#keyframes trans3 {
0% {
transform: translate3d(-100%, 0, 0);
}
50% {
transform: translate3d(-100%, 0, 0);
}
75% {
transform: translate3d(0%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#keyframes trans4 {
0% {
transform: translate3d(100%, 0, 0);
}
75% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0%, 0, 0);
}
}
#loading-texte {
color: white;
position: absolute;
top: 70px;
font-family: Arial;
text-align: center;
font-size: 12px;
}
<section id="global">
<div class="anim">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle-top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
<p id="loading-texte"><i>LOADING...</i></p>
</section>
I implement a form with AngularJS (for adding a contact).
This form contains several fields.
The first field is a text for the LastName. When a text is entered the system checks in the database if the value already exists. If the value exists the system displays an error message with the different contacts with the same lastName:
I created a popover in order displays contact details with the event mouseover. I have problem for displaying the popover in the page.
The popover should be displayed in front of the next fields. But I don't know how to do that (even with the relative position).
Here my HTML code:
<div ng-show="ContactForm.username.$dirty && alreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px; position:relative">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Last Name already exists:
<ul id="contacts_list">
<li ng-repeat=" cont in contacts" style="position:relative">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
{{ cont.lastname }} {{ cont.firsttname }}
</div>
</li>
</ul>
</div>
And the CSS:
.angular-popover-container {
position: absolute;
width: 0;
height: 0;
left: 0
}
.angular-popover {
position: absolute;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2);
background-color: #fff
}
.angular-popover-template {
padding: 10px;
}
.popover-floating-animation-top {
animation: floatingtop 3s .5s infinite;
-webkit-animation: floatingtop 3s .5s infinite
}
.popover-floating-animation-bottom {
animation: floatingbottom 3s .5s infinite;
-webkit-animation: floatingbottom 3s .5s infinite
}
.popover-floating-animation-left {
animation: floatingleft 3s .5s infinite;
-webkit-animation: floatingleft 3s .5s infinite
}
.popover-floating-animation-right {
animation: floatingright 3s .5s infinite;
-webkit-animation: floatingright 3s .5s infinite
}
#-webkit-keyframes floatingtop {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, -8px);
-webkit-transform: translate(0, -8px)
}
}
#-webkit-keyframes floatingbottom {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, 8px);
-webkit-transform: translate(0, 8px)
}
}
#-webkit-keyframes floatingright {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(8px, 0);
-webkit-transform: translate(8px, 0)
}
}
#-webkit-keyframes floatingleft {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(-8px, 0);
-webkit-transform: translate(-8px, 0)
}
}
.hide-popover-element {
display: none
}
.angular-popover-triangle {
width: 30px;
height: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 6px 10px -17px rgba(0, 0, 0, .2)
}
.angular-popover-triangle:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #fff;
transform: rotate(45deg);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2)
}
.angular-popover-triangle-top:after {
top: -8.5px;
left: 7px
}
.angular-popover-triangle-bottom:after {
top: 23.5px;
left: 7px
}
.angular-popover-triangle-right::after {
top: 7.5px;
left: 23.5px
}
.angular-popover-triangle-left::after {
top: 7.5px;
left: -8.5px
}
ul#contacts_list {
width: 200px;
margin-top:20px;
}
ul#contacts_list li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
Could you please help me to solve that?
Regards
The problem was due to the parameter z-index not correctly defined. All is ok now.
I have the following HTML and CSS code to draw the top of a cube. So it moves down and I want it to animate as if it is opening up. I am unable to figure out how to transform the top so that it appears to open up.
I have included the entire code for the cube. With respect to this, I want the top to open up.
.pers500 {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-backface-visibility: visible;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
-webkit-transform: translateZ(50px) translateX(171px) translateY(222px);
-moz-transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.4em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px);
-webkit-transform: skewY(40deg) translateZ(50px) translateY(65px) translateX(-20px);
-moz-transform: skewY(40deg) translateZ(50px) translateY(62px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.7em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
-webkit-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
-moz-transform: skewX(50deg) translateZ(50px) translateX(-14px) translateY(20px);
;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
/*0% {transform:rotateX(30deg);}
50% {transform:rotateX(30deg);}
100% {transform:rotateX(30deg);} commented code here doesn't work*/
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
To make the cube open up, you first need to set the transform-origin property (as mentioned in the other answer) to top. This setting would make the top side of the .face.top remain fixed when the rotation is being performed. Then you need to add the rotation using rotateX(). This would rotate the top face to produce the opening effect. Note that the transform property should contain the entire list of transforms for it to open correctly. You cannot just add the rotateX() alone within the animation.
.pers500 {
perspective: 500px;
}
/* Define the container div, the cube div, and a generic face */
.container {
width: 25%;
margin: 0 auto;
margin-top: 2em;
border: none;
animation-name: moveDown;
animation-duration: 2s;
animation-timing-function: linear;
transform: translate(0px, 110px);
}
.cube {
width: 70%;
height: 70%;
backface-visibility: visible;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
border: 1px solid brown; /* just for testing */
}
/* Define each face based on direction */
.front {
width: 3.64em;
height: 3.43em;
background-color: rgba(0, 255, 0, 0.7);
transform: translateZ(50px) translateX(171px) translateY(222px);
}
.left {
width: 2em;
height: 3.43em;
background-color: rgba(0, 0, 255, 0.7);
margin: 70px;
transform: skewY(40deg) translateZ(50px) translateY(64px) translateX(-20px);
}
.top {
width: 3.65em;
height: 1.69em;
background-color: rgba(255, 0, 0, 0.7);
margin: 100px;
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
transform-origin: top;
animation-name: openTop;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#-webkit-keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes moveDown {
0% {
transform: translate(0px, 10px);
}
50% {
transform: translate(0px, 55px);
}
100% {
transform: translate(0px, 110px);
}
}
#keyframes openTop {
0% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(0deg);
}
100% {
transform: skewX(50deg) translateZ(50px) translateX(-74px) translateY(20px) rotateX(200deg);
}
}
<div class="container">
<div class="cube pers500">
<div class="face front"></div>
<div class="face top"></div>
<br>
<br>
<br>
<div class="face left"></div>
</div>
</div>
Note:
Setting a transform-origin will affect the position of the top face in the demo and so the values that you've used for translateX() and translateY() on the top face need to be modified a bit like in the above demo.
The vendor prefixed versions of properties should always be added before the standard property in order to be future proof.
I have removed the vendor prefixed versions in the above snippet just to keep it simple.
Set the transform origin to tbe edge of the cube with
transform-origin: 0 50% 0;
Then rotate it around the z axis:
transform: rotateZ(90deg);
I hope this works for you, I didn't have the chance to test it.
I've been trying to get a simple CSS animation to work. Check this link here for the demo.
In Firefox it works fine, but I can't get it to work in Chrome/Safari.
My CSS code is ~
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
animation-delay: 1.1s;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#-webkit-keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
#-webkit-keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
Can anyone point out where I'm going wrong?
You forgot to add -webkit- to your animation and transform. Check this fiddle in chrome its working http://jsfiddle.net/Gt4rP/2/
CSS
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
-webkit-transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
-webkit-animation-delay: 1.1s;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
animation-delay: 1.1s;
}