I have a problem animating the rotation of some images in: MS Edge, IE and Safari.
In Chrome, Firefox and Opera the animation seems to work ok: Cards rotation shows both sides, and on hover the animation stops.
On MS Edge the animation flicks after few seconds, transform and z-index change between images has a discrepancy and it starts showing "the other side" during the rotation. --- On hover the animation stops, but on mouse-out after the animation returns the animation flicks again.
In IE, hover seems to be not working. I believe that here the problem is on the z-index not changing and showing the back image animation on top. On mouse out it makes weird half-cards images.
In Safari, it looks too weird and doesn't work at all.
Can anyone help?
Thanks
<body>
<style>
li {
display: inline-block;
border: 1px solid black;
}
.panel {
width: 128px;
height: 128px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.front {
background-size: contain;
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-animation: CardFlipFront 2.5s linear infinite;
-moz-animation: CardFlipFront 2.5s linear infinite;
-ms-animation: CardFlipFront 2.5s linear infinite;
animation: CardFlipFront 2.5s linear infinite;
}
.back {
background-size: contain;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: CardFlipBack 2.5s linear infinite;
-moz-animation: CardFlipBack 2.5s linear infinite;
-ms-animation: CardFlipBack 2.5s linear infinite;
animation: CardFlipBack 2.5s linear infinite;
}
.panel:hover .front {
z-index: 4000;
transition: 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-animation: none;
transform: rotateY(0deg);
}
.panel:hover .back {
z-index: 4000;
transition: 0s;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-webkit-animation: none;
transform: rotateY(0deg);
}
/* Animation Webkit */
#-webkit-keyframes CardFlipFront {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
}
#-webkit-keyframes CardFlipBack {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
/* Animation Mozila */
#-moz-keyframes CardFlipFront {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-moz-transform: rotateY(0);
transform: rotateY(0);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-moz-transform: rotateY(0);
transform: rotateY(0);
}
}
#-moz-keyframes CardFlipBack {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
}
/* Animation MS */
#keyframes CardFlipFront {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-ms-transform: rotateY(0);
transform: rotateY(0);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
-ms-transform: rotateY(0);
transform: rotateY(0);
}
}
#keyframes CardFlipBack {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
transform: rotateY(-180deg);
}
50% {
position: absolute;
top: 0px;
left: 0px;
z-index: 3000;
transform: rotateY(0deg);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
transform: rotateY(-180deg);
}
}
#Card_1 .front {
background-image: url('http://lorempixel.com/128/128/abstract/3/Dummy-Text/');
}
#Card_1 .back {
background-image: url('http://lorempixel.com/128/128/animals/1/Dummy-Text/');
}
#Card_2 .front {
background-image: url('http://lorempixel.com/128/128/people/2/Dummy-Text/');
}
#Card_2 .back {
background-image: url('http://lorempixel.com/128/128/food/2/Dummy-Text/');
}
#Card_3 .front {
background-image: url('http://lorempixel.com/128/128/people/4/Dummy-Text/');
}
#Card_3 .back {
background-image: url('http://lorempixel.com/128/128/transport/3/Dummy-Text/');
}
</style>
<div id="cards" align="center">
<ul>
<li>
<div>
<a href="#">
<h1>Card 1</h1>
<h2>Card Name</h2>
<div id="Card_1" class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<h1>Card 2</h1>
<h2>Card Name</h2>
<div id="Card_2" class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>
</a>
</div>
</li>
<li>
<div>
<a href="#">
<h1>Card 3</h1>
<h2>Card Name</h2>
<div id="Card_3" class="panel">
<div class="front card"></div>
<div class="back card"></div>
</div>
</a>
</div>
</li>
</ul>
</div>
</body>
Codepen here
Related
I am working on circular progress bar using HTML & CSS. HTML content is under for loop. Here, I tried with same 5% but the result of progress is different
.progress{
width: 120px;
height: 120px;
line-height: 120px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 15px solid #f2f5f5;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 100%;
height: 100%;
font-size: 14px;
font-weight: bold;
text-align: center;
position: absolute;
}
.progress .progress-value.red {
color: #f74d4d;
}
.progress .progress-value.dark-yellow {
color: #f78c4d;
}
.progress .progress-value.yellow {
color: #f7f24d;
}
.progress .progress-value.green {
color: #28b779;
}
.progress.red .progress-bar{
border-color: #f74d4d;
}
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-bar{
border-color: #f78c4d;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color:#f7f24d;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #28b779;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
.progress > span {
background-color: none;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="component-progress-info">
<div class="component-progress">
<div class="progress <?php echo $componentclass; ?>">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value red">5%</div>
</div>
</div>
<div class="component-info">
</div>
</div>
I have html inside a for-loop. But it is resulting me different response
Looking at the CSS (just the relevant parts):
.progress.red .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.dark-yellow .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
Different colors are set to use different keyframes, for example loading-3 for yellow, loading-5 for green, as seen above.
The keyframes then are defined with different rotations. Looking at two of them as an example:
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
Here loading-2 transforms from 0deg to 144deg.
Below loading-3 transforms from 0deg to 90deg.
Should the keyframes not be the same for every progress bar? Only the background color should change. But you define different keyframes for different colors, which is probably the cause if not part of it.
I've found a pure CSS banner slider that is works good in code pen. I've copied the code of HTML and CSS into one page but it does not work. All of the images are external and they available. It has no any Js or etc just html and css. You may see it perfectly works here CSS only slideshow Help me please.
<head>
</head>
<style>
.wrapper {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.slideshow {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
&--hero {
z-index: 3;
left: 0;
top: 50%;
// width: 100%;
height: 85%;
transform: translateY(-50%) skewY(-10deg);
transform-origin: center;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
.slides {
position: absolute;
left: 0;
top: -10%;
width: 100vw;
height: 100vh;
animation: 11s slideshow-hero-mobile -3s infinite;
}
.slide1 {
background-image: url(2.jpg);
animation: 20s slides-set-1 -0.1s infinite;
}
.slide2 {
background-image: url(3.jpg);
animation: 20s slides-set-2 -0.1s infinite;
}
.slide3 {
background-image: url(4.jpg);
animation: 20s slides-set-3 -0.1s infinite;
}
#media (min-width: 600px) {
left: 50%;
top: 0;
width: 67%;
height: 100%;
transform: translateX(-50%) skewX(-10deg);
.slides {
top: 0;
left: -25%;
height: 100%;
animation: 11s slideshow-hero -3s infinite;
}
}
}
&--contrast {
z-index: 1;
width: 100%;
height: 50%;
transform: none;
.slide {
filter: blur(3px);
}
&--before {
left: 0;
.slides {
width: 100vw;
}
}
&--after {
z-index: 2;
left: auto;
right: 0;
.slides {
width: 100vw;
left: auto;
right: 0;
}
}
.slides {
animation: 14s slideshow-contrast -5s infinite;
}
.slide1 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(200,75,80,0.5) 100%), url(https://source.unsplash.com/1000x750);
// background-image: url(../img/slideshow/hero-1.jpg);
animation: 20s slides-set-1 -0.2s infinite;
}
.slide2 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1001x751);
// background-image: url(../img/slideshow/hero-2.jpg);
animation: 20s slides-set-2 -0.2s infinite;
}
.slide3 {
background-image: linear-gradient(to bottom, rgba(100,100,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1002x752);
// background-image: url(../img/slideshow/hero-3.jpg);
animation: 20s slides-set-3 -0.2s infinite;
}
&--after {
top: auto;
bottom: 0;
.slides {
animation: 13s slideshow-contrast -13s infinite;
}
.slide {
background-position: right;
}
.slide1 {
animation: 20s slides-set-1 infinite;
}
.slide2 {
animation: 20s slides-set-2 infinite;
}
.slide3 {
animation: 20s slides-set-3 infinite;
}
}
#media (min-width: 600px) {
width: 50%;
height: 100%;
&--after {
top: 0;
bottom: auto;
.slides {
width: 50vw;
}
}
}
}
}
.slides,
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#keyframes slideshow-hero-mobile {
0% {
transform: scale(1) skewY(10deg);
}
50% {
transform: scale(1.05) skewY(10deg);
}
100% {
transform: scale(1) skewY(10deg);
}
}
#keyframes slideshow-hero {
0% {
transform: scale(1) skewX(10deg);
}
50% {
transform: scale(1.05) skewX(10deg);
}
100% {
transform: scale(1) skewX(10deg);
}
}
#keyframes slideshow-contrast {
0% {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
#keyframes slides-set-1 {
0% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
31% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
34% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
97% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
100% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
}
#keyframes slides-set-2 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
31% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
34% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
64% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
67% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
#keyframes slides-set-3 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
64% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
67% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
97% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
</style>
<html>
<body>
asdasd
<div class="wrapper">
<div class="slideshows">
<div class="slideshow slideshow--hero">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--before">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--after">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Try adding this css link.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/8.0.0/sanitize.min.css">
Also this is a SCSS codepen, not css. If you want the css to work you have to convert it
https://jsonformatter.org/scss-to-css
Your html
tag needs to be at the start of your code for the css part to function properly .
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/
The idea is to create an infinite animation on CSS that will show two sides of a card spinning all the time and to stop the animation on hover, revealing only the front and increasing the size 20% with a link to another section.
I am able to flip and grow to the second image on hover, but I seem to be unable to replace the action on a Keyframe animation.
This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.panel {
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
-webkit-animation: CardFlip 5s infinite;
}
.front {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background-image: url('http://placehold.it/300x300/red');
}
.back {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background-image: url('http://placehold.it/300x300/blue');
}
.panel:hover .front {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
#-webkit-keyframes CardFlip {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<br>
<br>
<div class="panel">
<div class="front card">
</div>
<div class="back card">
</div>
</div>
</body>
I think you need to add backface-visibility: hidden; only to front card.
If you need your animation to have infinite look, you have to have similar 0% and 100% points.
Also, you had missed transform-style: preserve-3d; property.
Also, I've added one more container to avoid animation on cards. I think it's more semantic.
Check out this fiddle: http://jsfiddle.net/nikoloza/2zrk7/
Update
If we add perspective: 1000 to the main container, we'll get real 3d effect. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/1/
Update 2
And if we need only left-to-right flipping we can set 360deg instead of 0deg into 100% point in the animation. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/2/
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/