CSS animation jumping to exact keyframe values without transitioning on Safari Mobile
CSS animation doesn’t transition with tweening in-between keyframes on Safari Mobile. It appears to just skip from 0% to 50% to 100% with no in-between transitioning.
I use autoprefixer to generate the -webkit- styles…
Here is a link to where it is happening: Avenii.com
Here is the code snippet for the CSS:
@keyframes blur-fade { 0% { filter: blur(15px) brightness(125%); } 50% { filter: blur(0) brightness(1) contrast(1); } 100% { filter: blur(15px) brightness(105%) contrast(125%); } } @keyframes blur-fade-sm { 0% { filter: blur(15px) brightness(125%); } 50% { filter: blur(0) brightness(1) contrast(1); } 100% { filter: blur(15px) brightness(105%) contrast(125%); } } For larger devices
.sm-img-container:first-child > .tall-img-sm:nth-child(1) { animation: blur-fade 4s ease 5s 1; } .sm-img-container:first-child > .tall-img-sm:nth-child(2) { animation: blur-fade 4s ease 14s 1; } .sm-img-container:first-child > .tall-img-sm:nth-child(3) { animation: blur-fade 4s ease 23s 1; } .sm-img-container:first-child > .tall-img-sm:nth-child(4) { animation: blur-fade 4s ease 32s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(1) { animation: blur-fade 4s ease 41s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(2) { animation: blur-fade 4s ease 50s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(3) { animation: blur-fade 4s ease 59s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(4) { animation: blur-fade 4s ease 68s 1; } For smaller devices
.sm-img-container:first-child > .tall-img-sm:nth-child(1) { animation: blur-fade-sm 4s ease 5s 1; } .sm-img-container:first-child > .tall-img-sm:nth-child(2) { animation: blur-fade-sm 4s ease 14s 1; } .sm-img-container:first-child > .tall-img-sm:nth-child(3) { animation: blur-fade-sm 4s ease 23s 1; } .sm-img-container:first-child > .tall-img-sm:nth-child(4) { animation: blur-fade-sm 4s ease 32s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(1) { animation: blur-fade-sm 4s ease 41s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(2) { animation: blur-fade-sm 4s ease 50s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(3) { animation: blur-fade-sm 4s ease 59s 1; } .sm-img-container:last-of-type > .tall-img-sm:nth-child(4) { animation: blur-fade-sm 4s ease 68s 1; } It works as intended on Firefox, Chrome, Microsoft Edge, and Opera.
*Side-note: On the mobile devices when the animation filter effects overlay the anchor tags it seems to cause a flickering effect.
