I have an animation of three arrows enlarging and moving down, using CSS transforms (scale and translateY), in addition to opacity. It works fine in Chrome, Firefox..but Safari just shows one small arrow fading in and out. Please visit the jsfiddle for a demo, which uses SCSS.
https://jsfiddle.net/hyanqerL/
The following is what I am using in my project now, after using Mig's suggestions (I didn't include all the mixins in the js fiddle. They are for prefixes). It improved a bit, but is still buggy on Safari.
$base: 9.6px;
.scroll-animation {
position: absolute;
width: 100%;
height: rem(41);
bottom: rem(24);
@include flexbox;
@include justify-content(center);
&:focus {
outline: none;
}
.chevron {
position: absolute;
width: $base * 3.35;
height: $base * .3;
opacity: 0;
@include transform(scale(.3));
@include animation-name(move-chevron);
@include animation-duration(3.15s);
@include animation-timing-function(linear);
@include animation-iteration-count(infinite);
}
.chevron:first-child {
@include animation-delay(0.28s);
}
.chevron:nth-child(2) {
@include animation-delay(0.66s);
}
.chevron:before, .chevron:after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50%;
background: white;
}
.chevron:before {
left: 0;
@include transform(skewY(30deg));
}
.chevron:after {
right: 0;
width: 50%;
@include transform(skewY(-30deg));
}
@keyframes move-chevron {
0% {
opacity: 0;
@include transform(translateY(0) scale(.3));
}
33.3% {
opacity: 1;
@include transform(translateY($base * 2.8) scale(1));
}
53.2% {
opacity: .2;
@include transform(translateY($base * 4.65) scale(0.3));
}
60.7% {
opacity: 0;
@include transform(translateY($base * 5.15) scale(0));
}
100% {
opacity: 0;
@include transform(translateY($base * 5.15) scale(0));
}
}
}
translateY
in thetransform
of the default.chevron
block. it is important, otherwise the whole consistency of thetransform
value is broken and cannot work properly. At least it does for me.