I want to make text cycling effect for a list of text
This is what I've tried so far:
.descslider{
text-align: center;
position: relative;
height: 200px;
overflow: hidden;
margin: 0;
padding: 0;
}
.descslider li{
width: 100%;
list-style-type: none;
position: absolute;
height: 200px;
top: -215px;
text-align: center;
}
.descslider li#first {
animation: cycle 12s ease-out infinite;
}
.descslider li#second {
animation: cycletwo 12s ease-out infinite;
}
.descslider li#third {
animation: cyclethree 12s ease-out infinite;
}
/* ANIMATION */
#keyframes cycle {
0% {
top: -205px;
opacity:1
}
6% {
top: 0px;
opacity:1
}
26% {
top: 0px;
opacity:1;
z-index:20;
}
33% {
top: 205px;
opacity: 0;
z-index: 20;
}
34% {
top: -205px;
opacity: 0;
z-index: -1;
}
92% {
top: -205px;
opacity: 0;
z-index: 20;
}
96% {
top: -205px;
opacity: 0;
}
100%{
top: -205px;
opacity: 0;
}
}
#keyframes cycletwo {
0% {
top: -205px;
opacity: 0;
}
26% {
top: -205px;
opacity: 0;
}
32% {
top: 0px;
opacity: 1;
}
38% {
top: 0px;
opacity: 1;
}
56% {
top: 0px;
opacity: 1;
z-index: 20;
}
62% {
top: 205px;
opacity: 0;
z-index: 20;
}
63% {
top: -205px;
opacity: 0;
z-index: -1;
}
100%{
top: -205px;
opacity: 0;
z-index: -1;
}
}
#keyframes cyclethree {
0% {
top: -205px;
opacity: 0;
}
56% {
top: -205px;
opacity: 0;
}
62% {
top: 0px;
opacity: 1;
}
68% {
top: 0px;
opacity: 1;
}
86% {
top: 0px;
opacity: 1;
}
92% {
top: 205px;
opacity: 0;
z-index: 20;
}
93% {
top: -205px;
opacity: 0;
z-index: -1;
}
100%{
top: -205px;
opacity: 0;
z-index: -1;
}
}
<ul class="descslider">
<li id="first">
<h3>Batik</h3>
<p class="lead">Color</p>
<hr>
<p class="desc">DESCRIPTION 1</p>
</li>
<li id="second">
<h3>Batik</h3>
<p class="lead">Design</p>
<hr>
<p class="desc">DESCRIPTION 2</p>
</li>
<li id="third">
<h3>Batik</h3>
<p class="lead">Theme</p>
<hr>
<p class="desc">DESCRIPTION 3</p>
</li>
</ul>
You can see the full code here: https://jsfiddle.net/08r36bc8/1/
I want to make the animation effect looks like in:
http://ihuntington.co/
How do I make the text animation like that only using css?
Thanks
Related
I have this scene with animation, also I have an issue with Safari v.13(and lower) and glitching blurred balls (.intro-circle) in my scene.
So, when I open my scene on Safari v.13 and lower, my blurred balls very sad, and I don't know how can I solve this issue.
Thanks a lot in advance!
This is my pen
html:
<section class="intro">
<img class="intro-circle js_image intro-circle--yellow"
src="https://studiogalo.dev.cheitgroup.com/wp-content/themes/studio-galo/assets/img/intro/intro-circle-yellow.svg" alt="">
<img class="intro-circle js_image intro-circle--blue"
src="https://studiogalo.dev.cheitgroup.com/wp-content/themes/studio-galo/assets/img/intro/intro-circle-blue.svg" alt="">
<h1 class="intro-title">Welcome to <br>Paradise</h1>
<h2 class="intro-sub_title">We empower dreamers <br>who dare to make a difference.</h2>
</section>
css:
.intro {
position: fixed;
background-color: #F6F5F0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
overflow: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1500;
visibility: visible; }
.intro-bg {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(1.001);
-ms-transform: scale(1.001);
transform: scale(1.001); }
.intro-bg--mobile {
display: none; }
.intro.animationEnd {
-webkit-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
opacity: 0;
visibility: hidden;
pointer-events: none; }
.intro-title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 3.05vw;
text-align: center;
font-weight: 300;
opacity: 0;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.intro-sub_title {
position: absolute;
left: 4.86vw;
top: 4.16vw;
font-size: 3.05vw;
text-align: left;
line-height: 1.1;
font-weight: 300;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease; }
.intro-circle {
position: absolute;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
will-change: transform; }
.intro-circle--yellow {
left: -3.75%;
top: -22.03%;
width: 48.61vw;
height: 48.61vw; }
.intro-circle--blue {
left: -18.75%;
top: 25.97%;
width: 54.16vw;
height: 54.16vw;
opacity: 0; }
.intro-circle--mobile {
display: none; }
js:
introAnimationStart()
function clearEntrance() {
$('.intro').addClass('animationEnd');
$('.site-wrapper, .header, body').addClass('load');
canMoveOn = true;
setTimeout(() => {
$('.intro').remove();
}, 1000);
}
function introAnimationStart() {
// /* intro animation GSAP */
window.history.scrollRestoration = 'manual';
window.scrollTo(0,0);
if (window.innerWidth >= 992) {
let introAnim = gsap.timeline({
defaults: {
duration: 1,
},
ease: Power1.easeInOut,
onComplete: function onComplete() {
// setTimeout(clearEntrance, 1000);
}
});
introAnim
.to(".intro-circle--yellow", {
delay: 1,
top: '-20%',
left: '70%',
}, 'subtitleAndYellow2')
.to(".intro-sub_title", {
delay: 1,
opacity: 0
}, 'subtitleAndYellow2')
.to(".intro-circle--blue", {
opacity: 1,
})
.to(".intro-circle--yellow", {
duration: 1.5,
left: '50%',
top: '50%',
translateX: '-50%',
translateY: '-50%',
}, 'YellowBlueTitle')
.to(".intro-circle--blue", {
duration: 1.5,
left: '50%',
top: '50%',
translateX: '-50%',
translateY: '-50%',
}, 'YellowBlueTitle')
.to(".intro-title", {
duration: 1.5,
opacity: 1,
}, 'YellowBlueTitle');
$('.intro').click(function () {
introAnim.timeScale(14);
});
} else {
/**
* Mobile animation-OPTIMIZATION
*/
// 1st step
setTimeout(() => {
$(".intro-circle--yellow, .intro-sub_title").addClass('fst_step');
}, 1000);
// 2nd step
setTimeout(() => {
$(".intro-circle--blue").addClass('snd_step');
}, 2200);
// 3rd step
setTimeout(() => {
$(".intro-circle--yellow, .intro-circle--blue, .intro-title").addClass('trd_step');
}, 3000);
setTimeout(clearEntrance, 6000);
}
}
I want to add :hover this class ".pic".
So it can contain more description on .pic:hover
I use transform SASS, width, and height on .pic:hover that seems not working.
I can't find out the problem.
Please help to find out my question.
Please watch it on my codepen for any details
.pic
width: 250px
height: 250px
//it doesn't get bigger when mouse is hovering over it
.pic:hover
width: 400px
height: 400px
Codepen
Your code isn't formatted correctly. With CSS, make sure to surround everything with brackets {}. Also make sure to add a semicolon after every line in a class so it knows where to break it up. Change your code to the below and it'll work:
// Adding {} and ; fixed this issue
.pic {
width: 250px;
height: 250px;
}
.pic:hover {
width: 400px;
height: 400px;
}
You can do something like this,
.item {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
<div class="item">
<img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="pepsi" width="540" height="548">
<div class="item-overlay top"></div>
</div>
Your code,
#charset "UTF-8";
* {
font-family: 微軟正黑體;
position: relative;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
display: flex;
justify-content: center;
align-items: center;
}
.camera {
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
position: absolute;
transform: translateY(-50%);
animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
perspective: 500;
-webkit-perspective: 500;
}
.lens {
width: 100px;
height: 100px;
border-radius: 50%;
border: 15px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: lensIn 0.3s 1.85s backwards;
}
.flashlight {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: flash 0.3s 2.45s both;
}
.pic {
width: 250px;
height: 250px;
border: 5px solid #fff;
border-bottom: 25px solid #fff;
background: #ccc;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
overflow: hidden;
transition: 0.3s;
box-sizing: border-box;
}
.pic:hover img {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.pic img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#keyframes ballUp {
0% {
top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
top: 10%;
width: 5px;
height: 5px;
}
}
#keyframes ballDown {
0% {
top: 10%;
}
100% {
top: 50%;
}
}
#keyframes cameraIn {
0% {
width: 5px;
height: 5px;
}
80% {
width: 250px;
height: 250px;
}
100% {
height: 200px;
width: 200px;
}
}
#keyframes lensIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
width: 120px;
height: 120px;
}
100% {
width: 100px;
height: 100px;
}
}
#keyframes flashlightIn {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes picIn {
0% {
height: 0;
width: 0;
top: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
100% {
height: 120px;
width: 120px;
top: 100%;
transform: translate(-50%, 0);
opacity: 1;
}
}
#keyframes picFlip {
0% {
transform: translate(-50%, 0) rotateX(0deg);
top: 100%;
width: 120px;
height: 120px;
}
100% {
transform: translate(-50%, -50%) rotateX(360deg);
top: 50%;
width: 250px;
height: 250px;
}
}
#keyframes showImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="camera">
<div class="lens"></div>
<div class="flashlight"></div>
<div class="pic">
<div class="imgbox"><img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt=""/></div>
<div class="text">
<h1>Hello</h1>
<h2>This is my memory</h2>
</div>
</div>
</div>
</div>
or zoom out with text inside,
#charset "UTF-8";
* {
font-family: 微軟正黑體;
position: relative;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
background: linear-gradient(#fc68d7, #8a3ab9, #bc2a8d, #cd486b, #e95950, #fbad50, #fccc63);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
h5 {
position: absolute;
left: 0px;
top: 0px;
bottom: 0;
z-index: -1;
}
.camera {
width: 200px;
height: 200px;
border: 10px solid #fff;
border-radius: 50px;
position: absolute;
transform: translateY(-50%);
animation: ballUp 0.5s 1s both, ballDown 0.2s 1.5s ease-in both, cameraIn 0.3s 1.7s both;
perspective: 500;
-webkit-perspective: 500;
}
.lens {
width: 100px;
height: 100px;
border-radius: 50%;
border: 15px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: lensIn 0.3s 1.85s backwards;
}
.flashlight {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
right: 20px;
top: 20px;
animation: flashlightIn 0.3s 2.15s backwards;
}
.flashlight:after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: flash 0.3s 2.45s both;
}
.pic {
width: 250px;
height: 250px;
border: 5px solid #fff;
border-bottom: 25px solid #fff;
background: #ccc;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: picIn 1s 2.48s both, picFlip 1s 3.5s both;
overflow: hidden;
transition: 0.3s;
box-sizing: border-box;
}
.pic:hover img {
-moz-transform: scale(0.65);
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
.pic img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#keyframes ballUp {
0% {
top: 50%;
width: 5px;
height: 5px;
opacity: 0;
}
10% {
opacity: 1;
}
100% {
top: 10%;
width: 5px;
height: 5px;
}
}
#keyframes ballDown {
0% {
top: 10%;
}
100% {
top: 50%;
}
}
#keyframes cameraIn {
0% {
width: 5px;
height: 5px;
}
80% {
width: 250px;
height: 250px;
}
100% {
height: 200px;
width: 200px;
}
}
#keyframes lensIn {
0% {
width: 0;
height: 0;
opacity: 0;
}
10% {
opacity: 1;
}
80% {
width: 120px;
height: 120px;
}
100% {
width: 100px;
height: 100px;
}
}
#keyframes flashlightIn {
0% {
transform: scale(0);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes flash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes picIn {
0% {
height: 0;
width: 0;
top: 100%;
transform: translate(-50%, 0);
opacity: 0;
}
100% {
height: 120px;
width: 120px;
top: 100%;
transform: translate(-50%, 0);
opacity: 1;
}
}
#keyframes picFlip {
0% {
transform: translate(-50%, 0) rotateX(0deg);
top: 100%;
width: 120px;
height: 120px;
}
100% {
transform: translate(-50%, -50%) rotateX(360deg);
top: 50%;
width: 250px;
height: 250px;
}
}
#keyframes showImg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="wrapper">
<div class="camera">
<div class="lens"></div>
<div class="flashlight"></div>
<div class="pic">
<div class="imgbox">
<h5>
Tech-Background
</h5>
<img src="https://image.freepik.com/free-vector/technological-background-with-circular-shapes_1035-4291.jpg" alt="" />
</div>
<div class="text">
<h1>Hello</h1>
<h2>This is my memory</h2>
</div>
</div>
</div>
</div>
Your problem is wrong css. You have to use curly braises and semi colons as well.
.pic{
width: 250px;
height: 250px;
}
.pic:hover{
width: 400px;
height: 400px;
}
I have this code. I really do not understand why it does not work.
I am using SCSS and compile it into CSS, but everything works, except of animation.
#keyframes spin {
form {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(3, 25, 39);
z-index: 10;
.loader {
width: 70px;
height: 70px;
border: 10px solid $secondary-color;
border-radius: 50%;
border-top-color: $main-color;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: 5s spin infinite linear;
}
}
You have typo in your code.
Form should be from.
#keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.preloader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(3, 25, 39);
z-index: 10;
}
.loader {
width: 70px;
height: 70px;
border: 10px solid red;
border-radius: 50%;
border-top-color: black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: 5s spin infinite linear;
}
<div class="preloader">
<div class="loader"></div>
</div>
I made some CSS animations, and on WebKit (Safari/Chrome), it works fine, but on Firefox the timing is messed up.
JSFiddle: http://jsfiddle.net/jmorais/p5XCD/1/
Code:
var open = false;
var intransition = false;
function openCard() {
intransition = true;
$('.out').addClass('openingOut');
$('.in-left').addClass('openingIn');
setTimeout(function() {
$('.out').css("z-index", "2");
$('.in-left').css("z-index", "3");
}, 850);
setTimeout(function(){
$('.out').removeClass('openingOut').addClass('outOpen');
$('.in-left').removeClass('openingIn').addClass('inOpen');
open = true;
intransition = false;
}, 3000);
}
function closeCard() {
intransition = true;
$('.out').addClass('closingOut');
$('.in-left').addClass('closingIn');
setTimeout(function() {
$('.out').css("z-index", "3");
$('.in-left').css("z-index", "2");
}, 1000);
setTimeout(function(){
$('.out').removeClass('closingOut').removeClass('outOpen');
$('.in-left').removeClass('closingIn').removeClass('inOpen');
open = false;
intransition = false;
}, 3000);
}
function toggleCard() {
if (intransition) { return; }
if (open) {
closeCard();
} else {
openCard();
}
}
body {
margin-left: 350px;
}
.tile {
position:absolute;
width:350px;
height:400px;
left: 50%;
margin: 0 auto;
background: pink;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.out {
z-index: 3;
}
.in-left {
z-index: 2;
left: -350px;
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: 100% 100%;
-moz-transform: rotateY(-180deg);
-moz-transform-origin: 100% 100%;
}
.in-right {
z-index: -1;
}
.content {
border: 3px black double;
margin: 10px;
padding: 20px;
height: 335px;
}
.perspective {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
position: relative;
display: inline-block;
}
/*****************************************
* Open
******************************************/
.openingOut {
/* Webkit */
-webkit-animation-name: open-card-out;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: open-card-out;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.openingIn {
/* Webkit */
-webkit-animation-name: open-card-in;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: open-card-in;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.outOpen {
-webkit-transform: rotateY(180deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotateY(180deg);
-moz-transform-origin: 0 0;
}
.inOpen {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 0 0;
-moz-transform: rotateY(0deg);
-moz-transform-origin: 0 0;
}
/* Webkit */
#-webkit-keyframes open-card-out {
from {
-webkit-transform-origin: left 0%;
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform-origin: left 0%;
-webkit-transform: rotateY(-180deg);
}
}
#-webkit-keyframes open-card-in {
from {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(180deg);
}
to {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(0deg);
}
}
/* Firefox */
#-moz-keyframes open-card-out {
from {
-moz-transform-origin: left 0%;
-moz-transform: rotateY(0deg);
}
to {
-moz-transform-origin: left 0%;
-moz-transform: rotateY(-180deg);
}
}
#-moz-keyframes open-card-in {
from {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(180deg);
}
to {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(0deg);
}
}
/*****************************************
* Close
******************************************/
.closingOut {
/* Webkit */
-webkit-animation-name: close-card-in;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: close-card-in;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
.closingIn {
/* Webkit */
-webkit-animation-name: close-card-out;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 3s;
-webkit-transition-delay: 0s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
/* Firefox */
-moz-animation-name: close-card-out;
-moz-animation-timing-function: ease;
-moz-animation-duration: 3s;
-moz-transition-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
}
#-webkit-keyframes close-card-in {
from {
-webkit-transform: rotateY(-180deg);
-webkit-transform-origin: 0% 0%;
}
to {
-webkit-transform: rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
}
#-webkit-keyframes close-card-out {
from {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform-origin: right 0%;
-webkit-transform: rotateY(180deg);
}
}
#-moz-keyframes close-card-in {
from {
-moz-transform: rotateY(-180deg);
-moz-transform-origin: 0% 0%;
}
to {
-moz-transform: rotateY(0deg);
-moz-transform-origin: 0% 0%;
}
}
#-moz-keyframes close-card-out {
from {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(0deg);
}
to {
-moz-transform-origin: right 0%;
-moz-transform: rotateY(180deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="perspective" onclick="toggleCard();">
<div class="tile out out">
<div class="content">
<p>out</p>
</div>
</div>
<div class="tile in-left">
<div class="content">
<p>in-left</p>
</div>
</div>
<div class="tile in-right">
<div class="content">
<div style="display: table; height: 100%; width: 100%;">
<p>in-right</p>
</div>
</div>
</div>
</div>
As you can see, the in-left div opens in the same time as the out div if you're using Safari/Chrome, but on Firefox it will open at different times, messing up the whole animation.
How can I fix this?
An answer is not needed because the animation effects are the same in both browsers, stable builds tested.
Chrome:
19.0.1084.56 (Official Build 140965) m
Firefox:
Mozilla/5.0 (Windows NT 5.1; rv:13.0) Gecko/20100101 Firefox/13.0
How ironic this non-answer is an answer.
To be sure, flush out your browsers cache and test on another PC for verification.
I am agree with arttronics, I saw that you test all css3 available solutions but I think there are just 2 posible solution without using css3 at all
just wait until firefox improve its performance with css3 animation and transition, I personally think that this won't be for so long
to use an alternative to make that animation like canvas, I think that this is not going to be easy, but I think that this is a posible solution only if you really need that animation running
http://jsfiddle.net/cD4Gr/1/
This is my animation code:
#-webkit-keyframes silde_to_top {
0% {
bottom: 0%;
top: default;
}
100% {
bottom: default;
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
#test{
-webkit-animation-name: silde_to_top;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
currently, the div just auto-starts at the top, instead of sliding to the top. the only thing that animates is the opacity.
It can't animate from a percent value to a default/auto value (or vice versa). This code gets it to work, albeit it starts offscreen:
#-webkit-keyframes silde_to_top {
0% {
top: 100%;
}
100% {
top: 0%;
z-index: 1000000;
opacity: 0.5;
}
}
Here's your fiddle example: http://jsfiddle.net/blineberry/cD4Gr/2/