I have this animation working in Firefox, Chrome, and Safari. I want it to work in IE (IE11 and hopefully 10). Some of this code is IE/MS specific in an attempt to get this work, not all it may be supported by IE. It was an attempt. I would appreciate any pointers towards a solution. Even one that diverges from this or uses javascript (though hopefully doesn't require jquery).
http://jsfiddle.net/raueqe8q/1/
/*Animations*/
#-o-keyframes flipInnerContainer {
0% {
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
#-ms-keyframes flipInnerContainer {
0% {
-ms-transform: perspective(1000px) rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-ms-transform: perspective(1000px) rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-ms-transform: perspective(1000px) rotateY(180deg);
transform: rotateY(180deg);
}
}
#-moz-keyframes flipInnerContainer {
0% {
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
#-webkit-keyframes flipInnerContainer {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
50% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
#keyframes flipInnerContainer {
0% {
transform: perspective(1000px) rotateY(0deg);
}
50% {
transform: perspective(1000px) rotateY(180deg);
}
100% {
transform: perspective(1000px) rotateY(180deg);
}
}
#-o-keyframes flipOuterContainer {
0% {
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
25% {
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
#-ms-keyframes flipOuterContainer {
0% {
-ms-transform: perspective(1000px) rotateY(0deg);
transform: rotateY(0deg);
}
25% {
-ms-transform: perspective(1000px) rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-ms-transform: perspective(1000px) rotateY(180deg);
transform: rotateY(180deg);
}
}
#-moz-keyframes flipOuterContainer {
0% {
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
25% {
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
#-webkit-keyframes flipOuterContainer {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
25% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
#keyframes flipOuterContainer {
0% {
transform: perspective(1000px) rotateY(0deg);
}
25% {
transform: perspective(1000px) rotateY(180deg);
}
100% {
transform: perspective(1000px) rotateY(180deg);
}
}
/* Safari was not keeping its end state so this fixes that and does not adversely effect
other webkit browsers */
#-webkit-keyframes disapear {
0% {
opacity: 1;
}
1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes disapear {
0% {
opacity: 1;
}
1% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes appear {
0% {
opacity: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
/*all*/
.adbox {
margin: 20px;
background: #000000;
position: relative;
z-index: 1;
}
#bg-exit {
background-color: rgba(255, 255, 255, 0);
cursor: pointer;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.container {
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.container-one,
.container-two,
.container-three,
.container-four,
.threehundred-one,
.threehundred-two,
.threehundred-three,
.threehundred-four,
.seventwentyeight-one,
.seventwentyeight-two,
.seventwentyeight-three,
.seventwentyeight-four {
position: absolute;
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.first {
position: absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: visible;
backface-visibility: hidden;
}
.first.firstonly {
-webkit-animation: disapear .5s linear 10s 1 forwards;
}
.first.back {
position: absolute;
-o-transform: rotateY(180deg);
-ms-transform: perspective(1000px) rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
box-sizing: border-box;
}
.back {
-ms-animation: appear .5s linear 3.5s 1 forwards;
}
.third {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-o-transform: rotateY(180deg);
-ms-transform: perspective(1000px) rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.tile {
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.tile.one {
-moz-animation: flipInnerContainer 2s linear 2s 1 forwards;
-o-animation: flipInnerContainer 2s linear 2s 1 forwards;
-webkit-animation: flipInnerContainer 2s linear 2s 1 forwards;
animation: flipInnerContainer 2s linear 2s 1 forwards;
}
.tile.two {
-moz-animation: flipInnerContainer 2s linear 4s 1 forwards;
-o-animation: flipInnerContainer 2s linear 4s 1 forwards;
-webkit-animation: flipInnerContainer 2s linear 4s 1 forwards;
animation: flipInnerContainer 2s linear 4s 1 forwards;
}
.tile.three {
-moz-animation: flipInnerContainer 2s linear 6s 1 forwards;
-o-animation: flipInnerContainer 2s linear 6s 1 forwards;
-webkit-animation: flipInnerContainer 2s linear 6s 1 forwards;
animation: flipInnerContainer 2s linear 6s 1 forwards;
}
.tile.four {
-moz-animation: flipInnerContainer 2s linear 8s 1 forwards;
-o-animation: flipInnerContainer 2s linear 8s 1 forwards;
-webkit-animation: flipInnerContainer 2s linear 8s 1 forwards;
animation: flipInnerContainer 2s linear 8s 1 forwards;
}
/*160x600*/
.onesixty {
width: 160px;
height: 600px;
}
.onesixty .container {
width: 160px;
height: 150px;
}
.container-one {
-moz-animation: flipOuterContainer 2s linear 11.25s 1 forwards;
-o-animation: flipOuterContainer 2s linear 11.25s 1 forwards;
-webkit-animation: flipOuterContainer 2s linear 11.25s 1 forwards;
animation: flipOuterContainer 2s linear 11.25s 1 forwards;
}
.container-two {
-moz-animation: flipOuterContainer 2s linear 11.75s 1 forwards;
-o-animation: flipOuterContainer 2s linear 11.75s 1 forwards;
-webkit-animation: flipOuterContainer 2s linear 11.75s 1 forwards;
animation: flipOuterContainer 2s linear 11.75s 1 forwards;
}
.container-three {
-moz-animation: flipOuterContainer 2s linear 11s 1 forwards;
-o-animation: flipOuterContainer 2s linear 11s 1 forwards;
-webkit-animation: flipOuterContainer 2s linear 11s 1 forwards;
animation: flipOuterContainer 2s linear 11s 1 forwards;
}
.container-four {
-moz-animation: flipOuterContainer 2s linear 11.5s 1 forwards;
-o-animation: flipOuterContainer 2s linear 11.5s 1 forwards;
-webkit-animation: flipOuterContainer 2s linear 11.5s 1 forwards;
animation: flipOuterContainer 2s linear 11.5s 1 forwards;
}
<section class="onesixty adbox">
<div id="bg-exit">
</div>
<div class="container">
<div class="container-three">
<div class="tile three">
<div class="first firstonly">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg" height="150px" width="160px">
</div>
</div>
</div>
<div class="container">
<div class="container-one">
<div class="tile one">
<div class="first firstonly">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg" height="150px" width="160px">
</div>
</div>
</div>
<div class="container">
<div class="container-four">
<div class="tile four">
<div class="first firstonly">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg" height="150px" width="160px">
</div>
</div>
</div>
<div class="container">
<div class="container-two">
<div class="tile two">
<div class="first firstonly">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px">
</div>
</div>
<div class="third">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg" height="150px" width="160px">
</div>
</div>
</div>
</section>
This is pretty different but a solution I got working in IE. This now works in everything by Safari.
The original question's example does work in Safari.
So with the two there is a solution in all modern browsers.
http://jsfiddle.net/0tggmkbf/
<script type="">
function flip1(){
var id='container1';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
function flip2(){
var id='container2';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
function flip3(){
var id='container3';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
function flip4(){
var id='container4';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
d.className = d.className + myClassName; // adding new class name
}
//My Attempt at the 3rd flip, not working
function finalFlip1(){
var imgElement = document.getElementById('A1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg";
var id='container1';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
function finalFlip2(){
var imgElement = document.getElementById('B1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg";
var id='container2';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
function finalFlip3(){
var imgElement = document.getElementById('C1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg";
var id='container3';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
function finalFlip4(){
var imgElement = document.getElementById('D1'); //find the image
imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg";
var id='container4';
var myClassName=" flip"; //must keep a space before class name
var d;
d=document.getElementById(id);
d.className=d.className.replace(myClassName,"");
}
window.setTimeout(flip1,2000);
window.setTimeout(flip2,4000);
window.setTimeout(flip3,6000);
window.setTimeout(flip4,8000);
window.setTimeout(finalFlip1,11250);
window.setTimeout(finalFlip2,11750);
window.setTimeout(finalFlip3,11000);
window.setTimeout(finalFlip4,11500);
</script>
<style>
/* entire container, keeps perspective */
.container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when this class is added */
.container.flip .back {
transform: rotateY(0deg);
}
.container.flip .firstonly {
transform: rotateY(180deg);
}
.container, .firstonly, .back {
width: 160px;
height: 150px;
}
/* flip speed goes here */
.container-one,.container-two,.container-three,.container-four {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.firstonly, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! firstonly pane, placed above back */
.firstonly {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}
.third{
display:none;
}
</style>
<section class="onesixty adbox">
<div id="bg-exit"></div>
<div class="container" id="container3">
<div class="container-three">
<div class="tile three">
<div class="first firstonly">
<img id="C1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px" />
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
<div class="container" id="container1">
<div class="container-one">
<div class="tile one">
<div class="first firstonly">
<img id="A1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
<div class="container" id="container4">
<div class="container-four">
<div class="tile four">
<div class="first firstonly">
<img ID ="D1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
<div class="container" id="container2">
<div class="container-two">
<div class="tile two">
<div class="first firstonly">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px" ID="B1">
</div>
<div class="first back">
<img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px">
</div>
</div>
</div>
</div>
</section>
Related
Blockquote
Hi people, i have an image gallery with grid and i want to put an Animista animation when user click on image , i tried to use hover on the class but there is an specificity error.
Blockquote
css:
img :hover{
.scale-up-center {
-webkit-animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
}
#-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(3);
transform: scale(3);
}
}
}
html :
<div class="grid">div class="modulo">
<div class="producto" data-name="p-9">
<img class="scale-up-center"src="Img/Pastel.jpg" alt="Pastel">
<h3>Pastel</h3>
<div class="info">Las medidas son : alto:47 cm, ancho : 54 cm</div>
</div>
</div>
:hover selector is activated by moving mouse over an element. You need to use focus. To do that tabindex also needs to be set. Here is a demo:
.producto {
overflow: hidden
}
.producto img:focus {
animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) backwards;
}
.producto img:active {
animation: none;
}
#keyframes scale-up-center {
0% {
transform: scale(0.5);
}
100% {
transform: scale(3);
}
}
<div class="grid">
<div class="modulo">
<div class="producto" data-name="p-9">
<img tabindex="0" src="https://placekitten.com/100/100" alt="Pastel">
<h3>Pastel</h3>
<div class="info">Las medidas son : alto:47 cm, ancho : 54 cm</div>
</div>
</div>
</div>
I have this script letting 2 characters move around 360degrees each. Now i have to add a pause of 4 seconds each time both have turned 180degrees. I have tried it with percentages but that doesnt work well. Either the letters will spin too fast or way too slow or the pause is not long enough.
Anyone has a solution for my problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<style>
.letter{
height: 80px;
z-index: 99;
position: absolute;
margin-top: 100px
}
.letter1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.letter2{
margin-left: 700px;
}
.letter3{
margin-left: 780px;
}
.letter4{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.letter5{
margin-left: 940px;
}
.letter6{
margin-left: 1020px;
}
.C {
position: absolute;
margin-left: 730px;
animation: rotC 3s infinite linear;
z-index: 1;
display: inline-block;
}
.P {
position: absolute;
margin-left: 730px;
animation: rotP 3s infinite linear;
z-index: 1;
display: inline-block;
/*animation-delay: move 3s infinite;*/
}
#keyframes rotC {
from {
transform: rotate(0deg)
translate(-130px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
}
#keyframes rotP {
from {
transform: rotate(0deg)
translate(130px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
}
</style>
<div class="vid"><!-- prycto-->
<img src="geknletters/P.png" alt="p" class="P letter">
<img src="geknletters/R.png" alt="r" class="letter2 letter">
<img src="geknletters/y.png" alt="y" class="letter3 letter">
<img src="geknletters/C.png" alt="c" class="C letter">
<img src="geknletters/T.png" alt="t" class="letter5 letter">
<img src="geknletters/o.png" alt="o" class="letter6 letter">
<video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
margin: 0;
width: 100%;
height: 100vh;
top:0;
left: 0;" >
</video>
</div>
</body>
</html>
Kind regards,
Jorn Barkhof
You can't stop the animation when the animation started .
There is animation-delay but that delays the start of the animation, but after it's started it runs continuously.
The solution will be Keyframes with No Changes.
For more info please read this link.
https://css-tricks.com/css-keyframe-animation-delay-iterations/
And the Answer to your question.
First thing that you will do is to make the animation to be 14s
since you will need a 4s stop and 3s animate .
3s animate (180deg) + 4s stop (180deg) + 3s animate (360deg) + 4s stop (360deg) = 14s
animation: rotP 14s infinite linear;
animation: rotC 14s infinite linear;
After that you will need to calculate the percentage of the animation.
We will need to use to percentage since we will do the keyframes with no changes.
(3/14)*100 = 21.4% (For 3s) -- (4/14)*100 = 28.6% (For 4s)
(21.4% = 3s) animation and (28.6% = 4s) stop time. For the 14s period of time.
then initialize the percentage
0% + 21.4% = 21.4% [total time 3s] -- since (21.4% = 3s) animation
21.4% + 28.6% = 50% [total time 7s] -- since (28.6% = 4s) stop time
50% + 21.4% = 71.4% [total time 10s]
71.4% + 28.6% = 100% [total time 14s]
.letter{
height: 80px;
z-index: 99;
position: absolute;
margin-top: 100px
}
.letter1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.letter2{
margin-left: 700px;
}
.letter3{
margin-left: 780px;
}
.letter4{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
.letter5{
margin-left: 940px;
}
.letter6{
margin-left: 1020px;
}
.C {
position: absolute;
margin-left: 730px;
animation: rotC 14s infinite linear;
z-index: 1;
display: inline-block;
}
.P {
position: absolute;
margin-left: 730px;
animation: rotP 14s infinite linear;
z-index: 1;
display: inline-block;
/*animation-delay: move 3s infinite;*/
}
#keyframes rotC {
0% {
transform: rotate(0deg)
translate(-130px)
rotate(0deg);
}
21.4% {
transform: rotate(180deg)
translate(-130px)
rotate(-180deg);
}
50% {
transform: rotate(180deg)
translate(-130px)
rotate(-180deg);
}
71.4% {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
100% {
transform: rotate(360deg)
translate(-130px)
rotate(-360deg);
}
}
#keyframes rotP {
0% {
transform: rotate(0deg)
translate(130px)
rotate(0deg);
}
21.4% {
transform: rotate(180deg)
translate(130px)
rotate(-180deg);
}
50% {
transform: rotate(180deg)
translate(130px)
rotate(-180deg);
}
71.4% {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
100% {
transform: rotate(360deg)
translate(130px)
rotate(-360deg);
}
}
<div class="vid"><!-- prycto-->
<img src="geknletters/P.png" alt="p" class="P letter">
<img src="geknletters/R.png" alt="r" class="letter2 letter">
<img src="geknletters/y.png" alt="y" class="letter3 letter">
<img src="geknletters/C.png" alt="c" class="C letter">
<img src="geknletters/T.png" alt="t" class="letter5 letter">
<img src="geknletters/o.png" alt="o" class="letter6 letter">
<video src="051476630-astronaut-doing-ballet-dance-m_H264HD1080.mov" style="position: absolute;
margin: 0;
width: 100%;
height: 100vh;
top:0;
left: 0;" >
</video>
</div>
Hope this helps
How can I rotate gif image when mouse hover on it using css3
#tiger:hover{
-webkit-transform:rotateX(180deg)
}
Use transform: rotate(90deg)
img:hover {
transform: rotate(90deg)
}
<img src="http://placehold.it/150/f00" alt="image">
try this :
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
}
.image:hover{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="image" src="http://placehold.it/350x150" alt="" width="120" height="120">
Hi please look at this script and tell me how to flip A B and C divs in time intervals. I want A to flip first then it stops, B flips next and stops, and C next and Back to A, B and C again like in a loop and start it over again. Is this possible in CSS3 ? In this code all the divs flip on the same time.
/* ::: HOLDER, CARD, FACES */
.holder {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.card, .front, .back{
position: absolute;
height: inherit;
width: inherit;
transition: all .7s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* ::: FACES */
.front{background: tomato;}
.back{background: slategray;}
/* ::: SETUP FACES */
.flipH .back{transform: rotateY(-180deg);}
.flipV .back{transform: rotateX(180deg);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.flipH:hover .card{ transform: rotateY(180deg); }
.flipV:hover .card{ transform: rotateX(-180deg); }
/* ::: AUTOMATED EFFECTS */
.flipH .card{
animation: flipH 2s 0s infinite alternate ease-in-out;
-webkit-animation: flipH 2s 0s infinite alternate ease-in-out;
}
.flipV .card{
animation: flipV 2s 0s infinite alternate ease-in-out;
-webkit-animation: flipV 2s 0s infinite alternate ease-in-out;
}
#keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
#-webkit-keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
#keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
#-webkit-keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">A</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">B</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH">
<div class="card">
<div class="front">C</div>
<div class="back">C</div>
</div>
</div>
As Maddy says, animation delay is the trick
/* ::: HOLDER, CARD, FACES */
.holder {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.card, .front, .back{
position: absolute;
height: inherit;
width: inherit;
transition: all .7s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* ::: FACES */
.front{background: tomato;}
.back{background: slategray;}
/* ::: SETUP FACES */
.flipH .back{transform: rotateY(-180deg);}
.flipV .back{transform: rotateX(180deg);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.flipH:hover .card{ transform: rotateY(180deg); }
.flipV:hover .card{ transform: rotateX(-180deg); }
/* ::: AUTOMATED EFFECTS */
.flipH .card{
animation: flipH 3s 0s infinite alternate ease-in-out;
-webkit-animation: flipH 3s 0s infinite alternate ease-in-out;
}
.flipV .card{
animation: flipV 3s 1s infinite alternate ease-in-out;
-webkit-animation: flipV 3s 1s infinite alternate ease-in-out;
}
.flipH:nth-child(3) .card {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
#keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
#-webkit-keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
#keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
#-webkit-keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">A</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">B</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH">
<div class="card">
<div class="front">C</div>
<div class="back">C</div>
</div>
</div>
There is in css3 2 type of tag animation-delay and animation-iteration-count, you need to google for that.
I think you want something like this-
.holder {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.card, .front, .back{
position: absolute;
height: inherit;
width: inherit;
transition: all .7s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
/* ::: FACES */
.front{background: tomato;}
.back{background: slategray;}
/* ::: SETUP FACES */
.flipH .back{transform: rotateY(-180deg);}
.flipV .back{transform: rotateX(180deg);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.flipH:hover .card{ transform: rotateY(180deg); }
.flipV:hover .card{ transform: rotateX(-180deg); }
/* ::: AUTOMATED EFFECTS */
.flipH .card{
animation: flipH 2s 0s 1 alternate ease-in-out;
-webkit-animation: flipH 2s 0s infinite alternate ease-in-out;
}
.flipV .card{
animation: flipV 2s 1s 1 alternate ease-in-out;
-webkit-animation: flipV 2s 0s infinite alternate ease-in-out;
}
.flipH.flipH2 .card{
animation: flipH 2s 2s 1 alternate ease-in-out;
-webkit-animation: flipH 2s 0s infinite alternate ease-in-out;
}
#keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
#-webkit-keyframes flipH {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(-180deg); }
}
#keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
#-webkit-keyframes flipV {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(-180deg); }
}
<div class="holder flipH">
<div class="card">
<div class="front">A</div>
<div class="back">A</div>
</div>
</div>
<div class="holder flipV">
<div class="card">
<div class="front">B</div>
<div class="back">B</div>
</div>
</div>
<div class="holder flipH flipH2">
<div class="card">
<div class="front">C</div>
<div class="back">C</div>
</div>
</div>
I hope it will helps you.
I'm relatively new to CSS. I saw a lot of similar topics but I couldn't find a solution to this problem so I'll ask away.
I'm trying to create a photobanner with a keyframe animation where the images scroll to the left and scale with img:hover. The translation transform works fine and the scale transform works fine however, the latter only works if I remove the css for the keyframe animation. How can I get both transformation to work at the same time?
My CSS is as follows:
.photobannerContainer {
margin: 0 auto;
width: 90%;
overflow: hidden;
}
.photobanner {
height: 480px;
width: 8000px; /* To contain all the images end-to-end. */
}
.photobanner img {
height:100%;
transition: all .2s ease;
/*If I remove these lines then the scale transformation will work.*/
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
.photobanner img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3726px);
}
}
#-moz-keyframes bannermove {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-3726px);
}
}
#-webkit-keyframes bannermove {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-3726px);
}
}
#-ms-keyframes bannermove {
0% {
-ms-transform: translateX(0);
}
100% {
-ms-transform: translateX(-3726px);
}
}
#-o-keyframes bannermove {
0% {
-o-transform: translateX(0);
}
100% {
-o-transform: translateX(-3726px);
}
}
The HTML is set up as follows:
<div class="photobannerContainer">
<div class="photobanner">
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
</div>
</div>
Thank you.
i have the problem today,and i dont know the reason too,but i solved it by add a extra div tag out side animation-div tag,and put transition in the outside div
like:
html
<div class="extra-div">
<div class="animation-div">
</div>
</div>
CSS
.extra-div{
transition: all .2s ease;
}
.extra-div:hover{
transform: scale(1.9);
}
.animation-div {
animation: myAnime 0.2s ease-out
}