The desired effect is working in Firefox and Chrome, but not Safari.
The Animation is to behave as follows:
Pan Immediately to the left
Zoom in
Slowly Pan to the right
Zoom out
These all work fine except that in Safari, there is no Zooming Out.
I can't for the life of me figure out why.
Please, any help is appreciated.
#frame {
position:relative;
width:660px;
margin:5% auto 0;
height:177px;
border:1px solid #999;
overflow:hidden;
-webkit-transform:scale(.5);
}
.paper {
position:absolute;
top:0;
left:0;
width:660px;
height:177px;
}
.scribble {
position:absolute;
top:0;
left:0;
width:0;
height:177px;
}
.green {
background:url(scribble1.png) no-repeat 0 0;
top:0;
}
.red {
background:url(scribble2.png) no-repeat 0 0;
top:45px;
}
.blue {
background:url(scribble3.png) no-repeat 0 0;
top:82px;
}
/*
* Add Zoom-in Routine
*
*/
#-webkit-keyframes zoomin {
0% {
-webkit-transform: scale(1);
}
100% {
-webkit-transform: scale(2);
}
}
/*
* Add Zoom-out Routine
*
*/
#-webkit-keyframes zoomout {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
/*
* Add Pan Routine
*
*/
#-webkit-keyframes pan {
0% {
left:660px;
}
50% {
left:-80px;
}
100% {
left:0;
}
}
/*
* Add Draw Routine
*
*/
#-webkit-keyframes draw {
0% {
width:0;
}
100% {
width:660px;
}
}
/*
* Begin Animation
*
*/
.paper {
-webkit-animation:
pan 10s ease-out,
zoomin 3s ease,
zoomout 5s 5s ease;
-webkit-animation-fill-mode:forwards;
}
.green {
-webkit-animation:draw 10s ease;
-webkit-animation-fill-mode:forwards;
}
.red {
-webkit-animation:draw 9s linear;
-webkit-animation-fill-mode:forwards;
}
.blue {
-webkit-animation:draw 8s ease-in-out;
-webkit-animation-delay:2s;
-webkit-animation-fill-mode:forwards;
}
<body>
<div id="frame">
<div class="paper">
<div class="scribble blue"></div>
<div class="scribble green"></div>
<div class="scribble red"></div>
</div>
</div>
</body>
</html>
The demonstration and live Code can be viewed at: http://blindmikey.com/dev/animation/scribbles2.php
I had a similar problem and found my answer here: Safari: Absolutely positioned DIVs not moving when updated via DOM
In short, set the transform style in a setTimeout() by itself for Safari 5.1
Related
Hi guys I am new here and have a problem.
So no hate please.
I have here an animation that swings every 2.5s.
However, this should also swing when I hover over it.
However, only one of the two goes.
What have I done wrong?
Could someone help?
Thanks in advance
The animation's transform will overwrite the one in :hover. It will not apply any meaningful change.
There's a couple of options to work around that:
Replace the animation, when a new animation is applied, this enforces a restart of the animation
Add a wrapper and animate that
The wrapper might as well be invisible (without padding/border/background).
And you might want to remove the animation of the child so it doesn't double animate.
.contact_example__mover {
display: flex;
flex-direction: column;
transform-origin: top center;
transform-style: preserve-3D;
animation: swing ease-in-out 1.5s infinite alternate;
}
.contact_example__mover.overwrite-animation:hover {
animation: swing-hover ease-in-out 1.5s infinite alternate;
}
.wrapper {
display: inline-block;
transition: transform .25s;
transform-origin: top center;
transform-style: preserve-3D;
padding: .5rem;
background-color: teal;
}
.wrapper:hover {
transform: rotate(-45deg);
}
.wrapper.and-remove-animation:hover .contact_example__mover {
animation: none;
}
#keyframes swing {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-45deg);
}
40% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes swing-hover {
0% {
transform: rotate(0);
}
20% {
transform: rotate(-45deg)
}
40% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.contact_example__mover {
background-color: olive;
padding: 1rem;
text-align: center;
color: bisque;
width: 4rem;
height: 4rem;
}
Overwrite with similar animation:
<div class="contact_example__mover overwrite-animation">set new animation</div>
<br>
<br> Add wrapper and transform that.<br>
<div class="wrapper">
<div class="contact_example__mover">wrap with animation</div>
</div>
<br>
<br> Add wrapper and also remove animation from child. <br>
<div class="wrapper and-remove-animation">
<div class="contact_example__mover">wrap with animation</div>
</div>
I am using steps() in my css animation. Now I want to start the css animation after a particular time. Below is an example.
#-webkit-keyframes typing {
from { width: 0 }
to { width:455px; }
}
#-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
.typing_animation h3 {
position: absolute;
font-size: 36px;
width:455px;
left: 0;
top:110px;
font-style: italic;
display: inline-block;
margin-left: -48px;
letter-spacing: 4px;
white-space: nowrap;
overflow: hidden;
border-right: 1px solid #000;
-webkit-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
-moz-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
}
The above one results in a cool typing animation. However, it starts right away. I want to hold the typing and start it after a delay of say 5 seconds.
Thanks
PS: A Fiddle in case that's useful
Maybe it's late but this is what you need:
Change your element width from "455px" to "0" ;
Then add "animation-fill-mode: forwards" into your ".typing_animation h3" class, so this css rule force to animation can change the width;
Add your desired delay like this: "animation-delay: 3s".
Notice: Don't forget prefixes and if you use several animations on a element, it's better to use a shorthand animation property. see tutorials.
This is a example: jsfiddle
/* typing animation */
#keyframes typing {from {width: 0} to {width:19em}}
#-webkit-keyframes typing {from {width: 0} to {width:19em}}
#-moz-keyframes typing {from {width: 0} to {width:19em}}
/* blinking animation */
#keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-webkit-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-moz-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
.my-animation {
width: 0;
overflow: hidden;
white-space:nowrap;
border-right: 0.1em solid #000000;
animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-webkit-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-moz-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
}
Try the animation-delay property:
-webkit-animation-delay: 5s;
animation-delay: 5s;
Note: Add this to the end of your h3 rule
you can use setTimeout function and add class to the particular element
setTimeout(function(){
$('p').addClass('text-show')
}, 3000);
p
{
font-size:60px;
}
.text-show
{
animation: textshow 2s ease-out forwards;
}
#keyframes textshow {
0% {
transform: scale3d(0.6, 0.6, 0.6);
opacity: 0;
}
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>We Design.</p>
thanks,
Jomin George paul
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.
I am trying to find a transitioning CSS code to transition two images. I want the first image to be shown for 4 seconds then fade into a second image which will stay the same for for seconds then fade back to the first. Right now I am not using CSS and am finding most CSS tutorials are formatted for an on :hoover. I want my image to constantly change without a :hover being needed.
The flexi ad coding I am using now is a ans works fine in waterfox and explorer but you can see the images being loaded in chrome with a bad flicker.
Here's the example of what I am working with. The script I am using now is actually transitioning through 30 images i made some that fade from one to the next and thats why it looks like it fades. I would like some kind of CSS that will only require 2 images and fade one to the next every 4 seconds.
http://www.vulgarmediaproductions.com/walt/walt.shtml
You need to use keyframe animations for this - DEMO
HTML:
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2012-10-a-web.jpg'>
<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-45-a-web.jpg'>
CSS:
img {
position: absolute;
width : 320px;
height: 180px;
}
img:last-child { animation: fader 4s infinite alternate; }
#keyframes fader { to { opacity: 0; } }
EDIT
If your images have transparency, then you'll need to animate the opacity for both of them, not just for the one on top. Like this - DEMO
img {
opacity: 0;
position: absolute;
width : 256px;
height: 256px;
}
img:first-child { animation: fadein 8s infinite alternate; }
img:last-child { opacity: 1; animation: fadeout 8s infinite alternate; }
#keyframes fadein { 50% { opacity: 1; } }
#keyframes fadeout { 50% { opacity: 0; } }
Also, keep in mind that you'll have to use prefixes (I did not use any since dabblet includes -prefix-free and it's easier to highlight the idea that way):
img:first-child {
-webkit-animation: fadein 8s infinite alternate; /* Chrome, Safari, Android, Blackberry */
-moz-animation: fadein 8s infinite alternate; /* FF, FF for Android */
-o-animation: fadein 8s infinite alternate; /* Opera 12 */
animation: fadein 8s infinite alternate; /* IE 10, FF 16+, Opera 12.5 */
}
#-webkit-keyframes fadein { 50% { opacity: 1; } }
#-moz-keyframes fadein { 50% { opacity: 1; } }
#-o-keyframes fadein { 50% { opacity: 1; } }
#keyframes fadein { 50% { opacity: 1; } }
/* same for the other set (fadeout) */
Not tested and just written on the fly, but should work.
If you have any problems getting it to work, let me know...
You may want to debug this using FireBug for Firefox. It helps you alot playing arround with CSS, HTML and JavaScript.
CSS3:
.slideShow
{
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 200ms ease-in-out 0s;
-moz-transition: all 200ms ease-in-out 0s;
-ie-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
}
.slideShowWrapper { position:relative; }
HTML:
<div class="slideShowWrapper" id="mySlideShow" style="width:400px;height:300px;">
<div class="slideShow" style="opacity:1.0"> (image 1 goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image . goes here) </div>
<div class="slideShow" style="opacity:0.0"> (image N goes here) </div>
</div>
JS:
function ssCycle(_obj)
{
var _oList=_obj.getElementsByTagName('div');
for (var _trace=0;_trace<oList.length;_trace++)
{
if(_oList[_trace].getAttribute('style').indexOf('opacity:1.0')>0)
{
_oList[_trace].style.opacity='0.0';
try
{
_oList[(_trace+1)].style.opacity='1.0';
}
catch(_e)
{
_oList[0].style.opacity='1.0';
}
}
}
};
(function(_src){ void(var tmrFunc = "void(ssCycle(document.getElementById("+_src+"));";setInterval(tmrFunc,4000);}).call('mySlideShow');
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