I have a relatively simple Fiddle, that I've mucked up with additional #-webkit- and #-moz- duplicates, but it still fails on Firefox.
div.overlay-dialogue {
...
animation: ANIM_NAME 0.5s ease-in-out;
}
#keyframes ANIM_NAME {
0% { transform: rotateY(55deg); opacity: 0; }
100% { transform: rotateY(0deg); opacity: 1; }
}
http://jsfiddle.net/pxpuL6ea/4/
Can anyone see why??
I got answer from another question: Firefox animation not starting on toggle display style
Firefox and Internet Explorer are rightfully running the animation
regardless of the display state
So to work this around, you can set animation to checked state, like this:
input[type=checkbox]:checked ~ div.overlay-dialogue {
display: block;
animation: ANIM_NAME 0.5s ease-in-out;
...
}
Related
I want to have the beginning animation on load and then on :hover to add another animation. The problem is, after I leave the element(not hovering) it goes back to its first animation and repeats it.
Is there any way to avoid this from happening?
Problem video :
https://youtu.be/uCZdo4FsCj8
Code :
.char {
animation: slide-down 2s forwards cubic-bezier(0, 1.18, .82, 1.02);
animation-delay: calc(0s + (0.1s * var(--char-index)));
animation-iteration-count: 1;
opacity: 1;
#keyframes slide-down {
from {
transform: translate(-125%, 125%);
opacity: 1;
}
to {
transform: translate(0%);
opacity: 1;
}
}
&:hover {
animation: newAnim 0.4s forwards linear;
color: red;
#keyframes newAnim {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
}
}
You cannot do it without using JavaScript. When :hover happens, the animation-iteration-count gets reset. This in turn causes the first animation to repeat after letting go of hovering. So you will have to use some JavaScript to get it working.
Have you considered using the animation just for the initial movement, and transitions for the :hover effect? This way, the animation-iteration-count is not reset after unhovering. Essentially add the following css code:
.char {
...your animations for initial loading
transition: color 0.4s linear, transform 0.4s linear;
}
.char:hover {
transform: scale(1.2);
color: red;
}
An example of such solution can be found in this codepen.
I have an animation that works fine on Firefox, Chrome but does not work on Safari and Edge.
The animation objects are contained in a svg file loaded with js.
The idea is that elements appear in succession at the center of screen and then move up to their intended final location.
An example of the css I use to achieve this is:
#-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
transform: translate(450px,222px);
}
}
#keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
transform: translate(450px,222px);
}
}
.svgLoaded #you {
-webkit-animation: move-you 1s ease-in 3s;
animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
So, this works fine on Firefox and Chrome but the translation does not happen in Safari and Edge. Not a massive problem if large screen are used as everything is still visible,
( you can see example here )
but it means that I cannot translate items to where I want them on a small screen.
I have been stack on this for more than a day, the only answer I found was about missing brackets but I checked my code and all brackets are balanced. Any help would be really appreciated.
I think this would probably work:
#-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
}
50% {
opacity: 1;
-webkit-transform: translate(450px,400px);
}
100% {
opacity: 1;
-webkit-transform: translate(450px,222px);
}
}
#keyframes move-you {
0% {
opacity: 0;
transform: matrix(1,0,0, 1,0,0, 450, 400);
}
50% {
opacity: 1;
transform: translate(1,0,0, 1,0,0, 450, 400);
}
100% {
opacity: 1;
transform: translate(1,0,0, 1,0,0, 450, 222);
}
}
.svgLoaded #you {
-webkit-animation: move-you 1s ease-in 3s;
animation: move-you 1s ease-in 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
There are a lot of problems with animating SVGs on different browsers. They all work different.
Here are some of the problems with creating consistent animations with SVGs:
IE and Opera don't honor CSS transforms at all on SVG elements. Instead, you must assign the value to the transform attribute.
Firefox didn't honor %-based origins in early versions (in latest versions it does).
Zooming in Safari breaks the sync between %-based and px-based origins.
Firefox doesn't recognize keyword-based origins like "right bottom", and Safari alters them when the zoom is anything but 100%.
In all browsers, px-based origins are measured differently for SVG elements than other DOM elements (see below).
quotation of document on SVG transformations in css-tricks
I found that using libraries like TweenMax do a pretty good work with almost all the browsers.
Of course there are some specific ways you should animate some of the properties so that they can work on IE 11. Few of them:
- Circle radius
- transitions
You can check the tips and tricks for the tool in css-tricks:
Goal:
Achieve animation that
apply initial style
on adding some class it plays forwards and keeps resulting styles
on removing trigger class it plays backwards and returns to initial state
What i got:
#keyframes translate {
0% {
transform: translate3d(-100%,0,0);
}
100% {
transform: translate3d(0,0,0);
}
}
.element {
animation-direction: reverse;
animation-duration: 0.35s;
animation-fill-mode: both;
animation-name: translate;
animation-play-state: running;
animation-timing-function: ease-in-out;
}
.element.is-animated {
animation-direction: normal;
}
Result:
It works as described above, (keeps style as required) except the lack of smooth animation. Just switches styles instantly. I guess there are some rules overlapping.
Does anybody made the same? I haven't find any proper tutorial for this particular issue
If you are going to switch between only this two transform properties. Use transition instead of animation.
.element {
transition:transform .2s ease;
width:30px;
height:30px;
border:1px solid red;
transform: translate3d(0,0,0);
}
.element.is-animated {
transform: translate3d(-100%,0,0);
}
Precisely you should add remove the class is-animated, whenever you want the transition to take place
I'm having some issues when using a delay with CSS animation.
My desired effect in the example:
The red box starts transparent waits 1 second, then fades in.
This happens in Chrome.
However, the behaviour in IE and Firefox is different:
The box starts visible, waits 1 second, then disappears and fades back in.
Which behaviour is correct? It seems to me that if you're going to delay an animation, it makes sense to wait at the first frame of the animation, not the last frame.
Is there a workaround without Javascript?
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.box {
height: 200px;
width: 200px;
background: red;
-webkit-animation: fadeIn 1s 1s;
animation: fadeIn 1s 1s;
}
<div class="box"></div>
You could use animation-fill-mode to determine how to 'fill' your animation when it ends. You can revert it to before, after, initial, etc... Its not the most intuitive naming convention, but it does allow you to set your animation to start with opacity : 0; and then retain the computed value you want after the animation using animation-fill-mode: forwards;.
MDN has a good explanation for it: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
I can not make the transition function on safari and chrome.
I have an animation on hover with keyframe (background-image move), and I apply an effect for the mouse out with transition, works perfectly on firefox, but on safari and chrome that doesn't works and use -webkit- doesn't change anything.
but the transition dont works on safari and chrome.
for the mouse over i have written this :
.fabanim_to_right_from_left_new_object_appears_1 .object-moved {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.fabanim_to_right_from_left_new_object_appears_1:hover .object-moved {
-webkit-animation: toRightFromLeftNewObjectAppears 0.3s forwards;
-moz-animation: toRightFromLeftNewObjectAppears 0.3s forwards;
animation: toRightFromLeftNewObjectAppears 0.3s forwards;
}
and that is my keyframe :
#-webkit-keyframes toRightFromLeftNewObjectAppears {
49% {
-webkit-transform: translate(100%);
background-position:right;
}
50% {
opacity: 0;
-webkit-transform: translate(-100%);
background-position:left;
}
100% {
opacity: 1;
-webkit-transform: translate(0);
background-position:left;
}
}
i have test millisecond too, but that doesn't works for me :(
What I did not do well?
You can see an exemple here : test transition
Please help.
Thank you.