I created a JSFiddle to show my problem.
http://jsfiddle.net/sqMT6/1/
When you click a paragraph, the 'hidden' class is set, so a webkit animation should be played, the paragraph should disappear in 5 seconds.
The class is set, and the animation is not played.
I must have missed something very simple.
Can anyone please point it out?
Thanks
Try removing the colons before from/to attributes in the #keyframe rule.
Original CSS
#-webkit-keyframes appear{
from:{opacity: 0;}
to: {opacity: 1;}
}
#-webkit-keyframes disappear{
from:{opacity: 1;}
to: {opacity: 0;}
}
Fixed CSS
#-webkit-keyframes appear{
from {opacity: 0;}
to {opacity: 1;}
}
#-webkit-keyframes disappear{
from {opacity: 1;}
to {opacity: 0;}
}
Example: http://jsfiddle.net/sqMT6/3/
Related
I made a carousel script that can either fade, slide or do both as a transition. This can be set by changing the class name of the parent container (#moduleCarousel_12).
[Fiddle: http://jsfiddle.net/6jx8ufwg/11/ ]
In Chrome this works fine.
In Safari (for Win) however:
the fade only works if the parent also has "slide left" in the class name. Which is strange, since it only adds a second animation (left-positioning).
.moduleCarousel.fade > div.active {
z-index: 3;
opacity: 1;
-webkit-animation-name: fade;
animation-name: fade;
}
.moduleCarousel.slide.left.fade > div.active {
-webkit-animation-name: slide-left, fade;
animation-name: slide-left, fade;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes fade {
0% {opacity: 0; -moz-opacity: 0;}
100% {opacity: 1; -moz-opacity: 1;}
}
/* Standard syntax */
#keyframes fade {
0% {opacity: 0; -moz-opacity: 0;}
100% {opacity: 1; -moz-opacity: 1;}
}
#-webkit-keyframes slide-left {
0% {left: 100%;}
100% {left: 0%;}
}
#keyframes slide-left {
0% {left: 100%;}
100% {left: 0%;}
}
2. the slide transition doesn't work at all
What am I doing wrong? :)
Safari on windows isn't a "real" browser, It's emulated to kind of, work on it. There are a lot of bugs concerning it, and a lot of web designers have issues with it, and also Apple withdrew their support for safari on windows in 2012. The good part is that there's a higher chance of winning the lottery than finding a windows-safari-user.
So this is a bug in Safari (for Windows), for which there is no workaround apparently.
EDIT:
According to CSS-tricks.com and w3schools.com the way I defined the animations is correct. (Unless I'm missing something?) And it works in all browsers, except in Safari for Windows.
And since nobody knows why it doesn't work and, as Easwee and Gho have said, there is no longer support from Apple for this version of the browser, the logical conclusion is: it's a bug and at this moment there is no fix. (And there probably never will be.)
But if I'm wrong or if I made a mistake in my script, please let me know.
I'm trying to get this animation to work in Chrome:
#-webkit-keyframes flipAnimation {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-webkit-transform-origin: right center;
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-webkit-transform-origin: right center;
}
}
#-webkit-keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes disappear {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.flipAnimation {
opacity: 0;
-webkit-backface-visibility: visible !important;
-webkit-animation: flipAnimation .5s, appear .2s, disappear .3s;
-webkit-animation-delay: 0s, .3s, 2s;
}
But it's always glitchy. For one, the div.flipAnimation doesn't appear with opacity 0. Second, the div flashes in and out and the last disappear animation doesn't seem to trigger properly. Is there a problem with have 2 opacity animations in the same animation even though they're spaced with delays?
I'm not quite sure if this is the desired effect are you aiming for, but you can look up at my solution:
JS Fiddle demo
I think the effect you are looking for cannot be achieved with keyframes. Please confirm if this is satisfactory!
Here the code working.
Demo Jsfiddle
the reson that it was not work is the delay time. you could not see the different.
so I change the delay time for 10 sec just for you see that it is work.
Your code work with other delay
I make some change in the code for to see that is work, just change the time and ather thing according your request:
first you see the appear ,flipAnimationu working togther after 20s you will see the disappear work and change color to azure,black,azure.
Looks like this can't be done with key frames alone. I'm going to use jquery to do the final fade out animation.
I use CSS3 Keyframes to make a image circle run without moving, i means like a wheel but circle not moving, it stay as it is.
Here is my CSS code :
.step_7 {
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px;
top: 377px;
left: 417px;
width:102px;
height: 104px;
z-index: 4;
}
#-webkit-keyframes circle-run
{
0%{
-webkit-transform:rotate(0deg);
}
100%
{
-webkit-transform:rotate(360deg);
}
}
.animation {
-webkit-animation: circle-run 2s infinite;
-webkit-animation-timing-function:linear;
}
Javascipt :
$('.btn1_inv').click(function () {
$('.step_7').addClass('animation');
});
here is my sample code :
http://jsfiddle.net/vLwDc/25/
From these above code, my element run but it move a little bit, how can i fix it ? thanks in advance .
do you mean why is it wobbly ? if so it's coz width height are different so it will be like that as it's not a perfect circle
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 3 months ago.
I'm trying to animate a div so that when the page load it has scale(0,0) and animates to scale(1,1). The problem I have is that once the animation takes effect the div scales to 0 again. What I want is the div to animate to scale(1,1) and staying like that. Here's my CSS code
#-moz-keyframes bumpin {
0% { -moz-transform: scale(0,0); }
100% { -moz-transform: scale(1,1); }
}
.landing .board {
-moz-transform: scale(0,0);
-moz-transform-origin: 50% 50%;
}
.landing .board {
-moz-animation-name: bumpin;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease;
-moz-animation-delay: 0s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
}
What am I doing wrong?
You're looking for animation-fill-mode:forwards which applies the last keyframe of the nimation to the element when the animation is done. https://developer.mozilla.org/en/CSS/animation-fill-mode
-moz-animation-fill-mode: forwards
Another way of doing this: If all you want to do is animate an element to scale, you don't need to use keyframes. transitions will suffice.
.landing-board {
-moz-transition: all 1s ease;
/* all other css properties */
}
.landing-board.animated {
-moz-transform: scale(1.1);
}
And very little javascript to add the related class to your element: (Here i'm using jquery but it could be done in any other framework or pure javascript)
$(window).load(function() {
$('.landing-board').addClass('animated');
});
How can I make a CSS3 Animation play to the end and then stop dead. I don't want it to return the elements being transformed back to their initial states.
Right now I'm using some javascript to add a class to the element after the animation's duration with the same properties as 100% in the animation.
This is possible with the "animation-fill-mode" defined as "forwards", at least in Webkit. I got this result with code like this:
#-webkit-keyframes test {
100% { background-color: #0000ff; }
}
a { background-color: #ff0000; }
a:hover { -webkit-animation: test 1s 1 ease forwards }
Note that specifying start color in 0% keyframe and end color in :hover was not necessary.
Of course, this code is Webkit specific. I haven't tried in other browsers with other vendor prefixes or with the general "animation" property.
put your end values in the main css class and the start values in the animation keyframes at 0%:
#keyframes test {
0% {
background-color: #ff0000; /* start value */
}
100% {
background-color: #0000ff;
}
}
a {
background-color: #ff0000; /* normal state */
}
a:hover {
animation-name: test;
animation-duration: 1s;
background-color: #ff0000; /* final state, after animation is finished */
}
In case this question is still open, I don't think this is possible using CSS3 animations as they're currently specified:
An animation does not affect the computed value before the application of the animation, before the animation delay has expired, and after the end of the animation.
However, you should be able to use CSS3 transitions for basic effects. There's a slide in the html5rocks.com presentation that shows how to do this. Here's the relevant [paraphrased] excerpt:
#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }
// Run this to animate to the left
document.getElementById('box').className = 'left';
// Run this to animate to the right
document.getElementById('box').className = 'right';
animation-fill-mode: forwards
The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing