I'm trying to animate two images from a fixed position to side-do-side, using transition and transform/translation code.
It works right on Firefox / Chrome but on WebKit devices like iPhone and Safari it acts oddly. Basically the animation ends on the right place, but the transition don't.
.anim div{
transition: ease all 1s;
}
.anim div.transformed.a{
transform: translate(150%, -11%);
}
.anim div.transformed.b {
transform: translate(50%, -110%);
}
Here's a demo:
https://jsfiddle.net/0o8L1jg2/1/
On Safari the image goes all the away across and then suddenly sticks to the final position (which happens to be right). Any way to make the transition acts correctly on here?
Add the webkit prefix for webkit devices.
.anim div{
transition: ease all 1s;
-webkit-transition: ease all 1s;
}
.anim div.transformed.a{
transform: translate(150%, -11%);
-webkit-transform: translate(150%, -11%);
}
.anim div.transformed.b {
transform: translate(50%, -110%);
-webkit-transform: translate(50%, -110%);
}
Related
I want to create a simple animation on ::after and ::before elements and on Desktop everything works well but on iOS, on Chrome I'm getting no opacity effects.
#keyframes sunshine {
from {
opacity: 30%;
transform: scale(0);
}
to {
opacity: 0%;
transform: scale(4);
}
}
This opacity is not working on iPhones and instead of opacity effect, I'm getting 100% background-color.
Is there any way to turn on the Alpha channel on iPhones ??
Try to give opacity value in floating-point numbersopacity: .3 instead of percentage values. Safari browser won't allow percentage value.
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
I'm trying to implement CSS animation by using svg.
I am expecting that 2 svg boxes is rotating (spinning) with transform-origin: center center; 360 degrees. Looks like it behave what I expected with Chrome and Firefox but not with macOS 10.12 (High Sierra) and iOS 11.0.x and 11.1 beta Safari.
Seems like transform-origin: center center; does not work in Safari?
Is there any way to fix this issue?
What I expect:
What I see on Safari:
Here is a sample code
HTML:
svg(width=500, height=500, viewBox='0 0 500 500')
rect(x=100, y=100, width=50, height=100)
rect(x=400, y=100, width=50, height=100)
CSS:
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
rect {
transform-origin: center center;
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&:nth-child(1) {
fill: red;
}
&:nth-child(2) {
fill: blue;
}
}
You can see the behavior here by accessing with Chrome and Safari:
https://codepen.io/manaten/pen/aLeXjW
EDIT:
https://codepen.io/manaten/pen/aVzeEK
Another example of the issue. Looks like origin is set to be the center of svg element by Safari.
try transform-box:fill-box;
this defines the layout box, to which the transform and transform-origin properties relate to
transform-box: fill-box; seems to solve the issue.
rect {
transform-origin: center center;
transform-box: fill-box;
animation-duration: 3s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
&:nth-child(1) {
fill: red;
}
&:nth-child(2) {
fill: blue;
}
}
Your first sample with transform-box:
https://codepen.io/MichaelSchober/pen/QOPbKx
Works on MacOs HighSierra 10.13.1 with Safari 11.0.1
The property is still experimental tough. So make sure to check if you are okay with the browser compabtility:
https://developer.mozilla.org/de/docs/Web/CSS/transform-box
I have set up a keyframe with does a translate and scale.
This works beautifully on Chrome and works 80% of the times on Safari as well.
But during those 20% of the times on safari, either a scale works or a translate works.
My requirement is to have both of them in unison.
Here is an example code.
#keyframes left-swipe {
from {
transform: translateX(-100%) scaleY(0.67);
}
to {
transform: translateX(0px) scaleY(1);
}
}
.right {
animation-duration: 0.5s;
animation-name: left-swipe;
}
I'm using POSTCSS and hence prefixing will happen automatically.
Using the latest Safari on iOS 9.2.
Any help would be appreciated.
I'm currently in the process of building a new mobile responsive site for my company that uses a number of CSS3 transitions on scroll to make images pop into focus. The effect is very striking and works great on modern browsers as well as my Google Nexus devices.
The problem I have is that the animations themselves are really slow on Apple Devices. I've tried them on a 1st Generation Ipad and an IPhone 5. On the Nexus you can scroll to the area of the page the animations are on and they will pop in straight away. On Apple devices however you have to wait for several seconds for the animations to trigger.
I have used the following library to achieve these animations:
http://www.justinaguilar.com/animations/scrolling.html
If you browse to this url on an Apple device, you will see what I mean with regards to the animations taking a while to load. After some research online I found that many suggest it could be due to the graphics processor not kicking in on these devices meaning everything is rendered (slowly) using the processor. To get around this it is suggested that the following is added to the animations to ensure the graphics processor kicks in:
-webkit-transform: translateZ(0);
However, I have already tried this to no avail. After some further research I have found that many suggest to replace translateX or translateY with translate3D but I have not tried this method yet as I do not understand how I would convert the following example:
/*
==============================================
fadeIn
==============================================
*/
.fadeIn{
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
-webkit-transform: translateZ(0);
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
}
#keyframes fadeIn {
0% {
transform: scale(0);
opacity: 0.0;
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
60% {
-webkit-transform: scale(1.1);
}
80% {
-webkit-transform: scale(0.9);
opacity: 1;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
My question therefore is twofold:
How would I convert the code above so that it uses the supposedly faster transform3d or scale3d syntax?
Are there any other methods I could use to improve the performance on these (Apple) devices so that they match the performance on more standards compliant devices such as the Nexus range?
Any help would be greatly appreciated.
Has anybody experienced flicker effect like this?
I use Angular with ngAnimate module. Without ngAnimate there is no flicker but also other needed animations goes away. So I need to stay with ngAnimate but get rid of flicker.
Initial state of popup:
.fade-scale {
-webkit-transition: all .2s ease-in-out;
-webkit-transform:scale(0.8);
opacity:0;
}
On tap it adds this class on popup
.show {
-webkit-transform:scale(1);
opacity:1;
}
All of these don't help
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;