I have been asked to figure out why this animation works in chrome but not in firefox, I have little experience with css3 transitions, I prefer jQuery but I have been asked to get to the bottom of it so...
here is the css, I hope its obvious what the html would be, I'm sure the html is fine as it works in chrome so I'm sure its a syntax error or similar.
edit - please see http://jsfiddle.net/5Uq86/
/* the animation */
#keyframes sub-menu-anim { to {height: 65px;} }
#-moz-keyframes sub-menu-anim /* Firefox */ { to {height: 65px;} }
#-webkit-keyframes sub-menu-anim /* Safari and Chrome */ { to {height: 65px;} }
#-o-keyframes sub-menu-anim /* Opera */ { to {height: 65px;} }
/* products menu animation */
#keyframes sub-menu-anim-prod { to {height: 210px;} }
#-moz-keyframes sub-menu-anim-prod /* Firefox */ { to {height: 210px;} }
#-webkit-keyframes sub-menu-anim-prod /* Safari and Chrome */ { to {height: 210px;} }
#-o-keyframes sub-menu-anim-prod /* Opera */ { to {height: 210px;} }
/* health menu animation */
#keyframes sub-menu-anim-health { to {height: 294px;} }
#-moz-keyframes sub-menu-anim-health /* Firefox */ { to {height: 294px;} }
#-webkit-keyframes sub-menu-anim-health /* Safari and Chrome */ { to {height: 294px;} }
#-o-keyframes sub-menu-anim-health /* Opera */ { to {height: 294px;} }
/* applying the animation to the menu */
#primaryNav li.menu-item ul.sub-menu {
animation:sub-menu-anim 0.5s;
-moz-animation: sub-menu-anim 0.5s; /* Firefox */
-webkit-animation: sub-menu-anim 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim 0.5s; /* Opera */
}
#primaryNav li.menu-item ul.sub-menu ul.sub-menu {
animation:none;
-moz-animation:none; /* Firefox */
-webkit-animation:none !important; /* Safari and Chrome */
-o-animation:none; /* Opera */
}
#primaryNav li#menu-item-17 ul.sub-menu {
animation:sub-menu-anim-prod 0.5s;
-moz-animation: sub-menu-anim-prod 0.5s; /* Firefox */
-webkit-animation: sub-menu-anim-prod 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim-prod 0.5s; /* Opera */
}
#primaryNav li#menu-item-229 ul.sub-menu {
animation:sub-menu-anim-health 0.5s;
-moz-animation: sub-menu-anim-health 0.5s; /* Firefox */
-webkit-animation: sub-menu-anim-health 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim-health 0.5s; /* Opera */
}
The problem seemed to be with where you were calling the animation. I changed your CSS selector to do it on the hover (so that the animation happens each time you hover) and made an adjustment to the -moz-animation property to include more values, to this:
#primaryNav li#menu-item-17:hover > ul.sub-menu {
animation:sub-menu-anim-prod 0.5s;
-moz-animation: 0.5s ease 0s normal none 1 sub-menu-anim-prod;
-webkit-animation: sub-menu-anim-prod 0.5s; /* Safari and Chrome */
-o-animation: sub-menu-anim-prod 0.5s; /* Opera */
}
This seems to work. I have checked it in Firefox and Chrome. I also update other selectors to incorporate what I have done above. Please check this fiddle for the rest of the changes.
Related
I'm fading in two objects on a very simple page. First the logo, then the text. Why is the animation on the text not delaying with this code? The other one works flawlessly, but it doesn't have any delay.
.centralimg {
background-image: url(logo.png);
background-size: 576px 173px;
width: 576px;
height: 173px;
animation: fadein 1200ms;
-moz-animation: fadein 1200ms; /* Firefox */
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-o-animation: fadein 1200ms; /* Opera */
}
.centraltext {
color: rgb(147, 145, 147);
font-family: 'Nunito', sans-serif;
font-size: 8pt;
margin-top: 25px;
animation: fadein 1200ms;
animation-delay: 3s;
-moz-animation: fadein 1200ms; /* Firefox */
-moz-animation-delay:3s;
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-webkit-animation-delay:3s;
-o-animation: fadein 3200ms; /* Opera */
}
Your code is correct, but you must add some property to the .centraltext, because it should not be visible until the animation is applied (opacity: 0 in JSFiddle example).
And also add the property animation-fill-mode to preserve the style of the last frame.
Example: JSFiddle
.centraltext {
...
opacity: 0;
animation-fill-mode: forwards;
}
It will delay two seconds, then start the animation. It can be useful.
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
I need a side panel that slides in and slides out if the button is clicked. I am trying to write it in pure css.
How can achieve the transition smooth. I tried keyframes and i am not getting the desired result.
Here is my jsFiddle link
Here is my css i played with
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {
}
.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
-webkit-animation-name: slideOut; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-name: slideOut;
animation-duration: 4s;
animation-direction: reverse;
}
.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
-webkit-animation-name: slideIn; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-direction: forwards; /* Chrome, Safari, Opera */
animation-name: slideIn;
animation-duration: 4s;
animation-direction: forwards;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideIn {
0% {right:-100px;}
25% {right:-75px;}
50% {right:-50px;}
75% {right:-25px;}
100% {right:0;opacity: 1;}
}
/* Standard syntax */
#keyframes slideIn {
0% {right:-100px;}
25% {right:-75px;}
50% {right:-50px;}
75% {right:-25px;}
100% {right:0;opacity: 1;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideOut {
0% {right:0px;}
25% {right:25%;}
50% {right:50%;}
75% {right:75%;}
100% {right:100%;}
}
/* Standard syntax */
#keyframes slideOut {
0% {right:0px;}
25% {right:25%;}
50% {right:50%;}
75% {right:75%;}
100% {right:100%;}
}
I got the answer with this set of codes. But want to make sure whether the code set is correct. And what is the use of
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave { }
.showFlyoutPanel.ng-enter, .showFlyoutPanel.ng-leave {
}
.showFlyoutPanel.ng-enter,
.showFlyoutPanel.ng-leave.ng-leave-active {
-webkit-animation-timing-function: ease-in-out;
-webkit-animation: slideOut 5s; /* Chrome, Safari, Opera */
animation: slideOut 5s ;
}
.showFlyoutPanel.ng-leave,
.showFlyoutPanel.ng-enter.ng-enter-active {
-webkit-animation: slideIn 5s; /* Chrome, Safari, Opera */
animation: slideIn 5s ;
-webkit-animation-timing-function: ease-in-out;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideIn {
from {left: 100%;}
to {left: 0px;}
}
/* Standard syntax */
#keyframes slideIn {
from {left: 100%;}
to {left: 0px;}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes slideOut {
from {left: 0px;}
to {left: 100%;}
}
/* Standard syntax */
#keyframes slideOut {
from {left: 0px;}
to {left: 100%;}
}
I am using this code to fade-in images when the page loads. Works fine in all browsers I have tested except from IE on Windows.
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {opacity:0;-webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1;animation:fadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-duration:1.5s;}
.fade-in.one {-webkit-animation-delay: 0.3s;-moz-animation-delay: 0.3s;animation-delay: 0.3s;}
.fade-in.two {-webkit-animation-delay: 0.6s;-moz-animation-delay:0.6s;animation-delay: 0.6s;}
.fade-in.three {-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;animation-delay: 0.9s;}
any ideas?
You are using this method and it has a warning for IE:
Warning! This CSS3 code will only work on Firefox, Chrome, Safari and
maybe newer versions of IE (after version 9)
Since IE9 doesn’t support css3 animations but does support opacity: 0;
property you will have to have ie9 load a separate ie9 css where you
have all your fade classes set to opacity: 1
If you are looking for alternative:
Method 1:
If you are looking for a self-invoking transition then you should use CSS3 Animations, they aren't supported as well but this is exactly the kind of thing they were made for.
CSS
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Demo
http://jsfiddle.net/SO_AMK/VV2ek/
Browser Support
All modern browsers, IE 10+: http://caniuse.com/#feat=css-animation
Method 2:
Alternatively, you can use jQuery (or plain JS, see third code block) to change the class on load:
jQuery
$("#test p").addClass("load");
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
Plain JS (not in demo)
document.getElementById("test").children[0].className += " load";
Demo
http://jsfiddle.net/SO_AMK/a9dnW/
Browser Support
All modern browsers, IE 10+: http://caniuse.com/#feat=css-transitions
Method 3:
Or, you can use the method that .Mail uses:
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Demo
http://jsfiddle.net/SO_AMK/a9dnW/3/
Browser Support
jQuery 1.x: All modern browsers, IE 6+: http://jquery.com/browser-support/
jQuery 2.x: All modern browsers, IE 9+: http://jquery.com/browser-support/
This method is the most cross-compatible as the target browser does not need to support CSS3 transitions or animations.
Source
Try to add the prefix -ms- like -ms-animation-delay.
Because you have just specify the prefix -moz- for mozilla and -webkit- for chrome.
I am try to create a spinning image horizontally using purely CSS3.
This is a link to my page
http://www.csupomona.edu/~lannguyen/ISSM_WEB/html/
This is the css file:
www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css
the spin caller is at the top, and the implementation is at the bottom.
My issue is that the spinning that CSS3 provided is not full rotation. I would like some thing like this
http://davidwalsh.name/demo/css-cube.php (the depth cube example, but no need 3D).
can anyone help please.
thanks
Try This jsfiddle
<div class="cube">TRY</div>
CSS
.cube {
background-color: #5F9EA0;
border: 1px solid #CCCCCC;
height: 200px;
position: relative;
transform-style: preserve-3d;
-ms-transform-style:preserve-3d; /* IE 9 */
-webkit-transform-style:preserve-3d; /* Opera, Chrome, and Safari */
width: 200px;
}
#keyframes spin {
from { transform: rotateY(0);
-ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}
.cube {
animation: spin 5s infinite linear;
-webkit-animation:spin 5s infinite linear;
-ms-animation:spin 5s infinite linear;
}
#-webkit-keyframes spin {
from { transform: rotateY(0);
-ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}
I've made my backgrounds fade in with CSS3 here: http://www.cphrecmedia.dk/musikdk/stage/artistchannel.php
It works fine, but not in Firefox (newest beta).
The funny thing though is that my small pulse animation works fine:
http://www.cphrecmedia.dk/musikdk/stage/chat.php
So it seems its the opacity-animation which wont work.
This is my code:
.fadeIn{
animation: fadein 1s;
-moz-animation: fadein 1s; /* Firefox */
-webkit-animation: fadein 1s; /* Safari and Chrome */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
Anyone who knows whats wrong?