I have a problem with image animations only on mobile. On the desktop it works well and on the mobile when I enter the site for the first time, something wrong happens only the first time I enter. If I refresh the page, it works well on furniture. I mention that on the div below with texts it works ok but not on images.
.slide-in-left {
animation-duration: 2s;
animation-name: slide-in-left;
}
.slide-in-right {
animation-duration: 2s;
animation-name: slide-in-right;
}
#keyframes slide-in-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
#keyframes slide-in-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
You can see in the gif below what is happening:
https://gifyu.com/image/SM16Q
Thank you in advance.
Related
I'm doing some CSS animations inside a modal dialog. Here's the pertinent SCSS:
#keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
#keyframes shrink {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}
$duration: 0.5s;
$animationFillMode: both;
&:not(.active):hover, &.active {
img {
animation: grow $duration $animationFillMode;
}
}
&:not(.active) {
img {
animation: shrink $duration $animationFillMode;
}
}
This works well but the problem is, when I open the modal, the animations kick in immediately. For example, because when the modal is first open I'm not hovering on one of the elements, the element instantly shrinks from big to small. I want the element to start in the small state when the modal is open.
Is is possible? TIA
Yes it is, use reverse tag.
Example: animation-direction: reverse;
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:
I'm trying a technique described on CSS Tricks:
http://css-tricks.com/slide-in-as-you-scroll-down-boxes/
I'm a bit stumped on this one... When I view the technique on the CSS Tricks website in Safari, it works fine... However, when I try the code out, I can't get it to work on Safari... Works fine in Firefox and Chrome.
Anyone have any ideas?
I greatly appreciate some extra eyes on this, because I've been staring at this way too long.
Thanks in advance.
JSFiddle:
http://jsfiddle.net/pjbsL1mk/1/
The code is pretty much verbatim, except that I added "-webkit-" along side the original code to the classes... Also, I'm using jQuery 1.8.3.
.come-in {
-webkit-transform: translateY(150px);
-webkit-animation: come-in 1s ease forwards;
-webkit-animation-delay: 0.2s;
transform: translateY(150px);
animation: come-in 1s ease forwards;
animation-delay: 0.2s;
}
.come-in:nth-child(odd) {
animation-duration: 0.6s; /* So they look staggered */
}
.already-visible {
-webkit-transform: translateY(0);
-webkit-animation: none;
transform: translateY(0);
animation: none;
}
#-webkit-keyframes come-in {
to {
transform: translateY(0);
}
}
#keyframes come-in {
to {
transform: translateY(0);
}
}
You forgot to add -webkit- prefix on some properties:
#-webkit-keyframes come-in {
to {
-webkit-transform: translateY(0); // here
}
}
This should make the animation work. Also add -webkit- here:
.come-in:nth-child(odd) {
-webkit-animation-duration: 0.6s; // here
}
I have a problem with CSS animation. Animation works great in IE10 (and Chrome, Mozilla, Safari), but doesn't work in IE9 (and also IE edge).
This is my CSS:
.tossing07{
-webkit-animation-name: tossing07;
animation-name: tossing07;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes tossing07 {
0% {
-webkit-transform: rotate(-25deg);
}
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-25deg);
}
}
#keyframes tossing07 {
0% {
transform: rotate(-25deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-25deg);
}
}
It's normal, animation work since Ie10 look at can i use page, sorry
CSS animation is not supported for IE9 or earlier. Thats why your css animation is not working. Even vendor prefixing would not work.
When I do a Page Transition with jQuery Mobiles data-transition="slideup" the Page itself will fadeOut, and only after that the slideup of the Page will occur.
This behaviour seems to be consistent with jQuery Mobile itself since even the Documentations have the same issue.
I want to disable this fade. I want the new Page to just slide up without any fading happening. This should be possible.
A simple jQuery slideIn() perhaps? But I want to do it the proper way, perhaps some one already figured this one out?
Note: I tried -webkit-backface-visibility: hidden but it seems unrelated to this, since the actual slideup transition is done. Just after the page fades....
I have solved this issue on my own.
I have two pages #one and #two. After clicking on a button in #one page #two is supposed to slideup from the bottom. Now to prevent a fadeOut of the first page, which jQuery Mobile would usually do before sliding up the second page I created a custom animation like this:
#-webkit-keyframes dontdoshit {
from { -webkit-transform: translate(0,0); }
to { -webkit-transform: translate(0,0); }
}
#-moz-keyframes dontdoshit {
from { -moz-transform: translate(0,0); }
to { -moz-transform: translate(0,0); }
}
#keyframes dontdoshit {
from { transform: translate(0,0); }
to { transform: translate(0,0); }
}
Now I'm making sure this animation is called upon page #one, whenever it would otherwise fade away before page #two slides up.
.slideup.out {
-webkit-animation-name: dontdoshit;
-webkit-animation-duration: 1ms;
-moz-animation-name: dontdoshit;
-moz-animation-duration: 1ms;
animation-name: dontdoshit;
animation-duration: 1ms;
}
.slideup.in.reverse {
-webkit-animation-name: dontdoshit;
-webkit-animation-duration: 1ms;
-moz-animation-name: dontdoshit;
-moz-animation-duration: 1ms;
animation-name: dontdoshit;
animation-duration: 1ms;
}
Finally to prevent jQuery Mobiles Scriptlet of hiding my first page I forced
#one {
display: block!important;
z-index: 2;
}
and have given page two a higher z-index so it would be on top of page one
#two {
z-index: 9999;//this is quite a lot :o
}