Here is some CSS code that I used to animate a list of items on my website:
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: all 0.3s ease-in-out;
-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}
However, this animation does not seem to work on Safari. Can anyone explain why and provide a solution? Any help or hints would be greatly appreciated!
Thank you, Jack
I have modified the CSS to exclude the problematic "transition: all" property but the issue persists:
selector {
display: flex;
}
#primary li a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, #CF2E2E, #CF2E2E 50%, #000000 50%);
background-size: 200% 100%;
background-position: -100%;
-webkit-transition: 0.3s ease-in-out;
-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}
#primary li a:before {
display: block;
content: '';
width: 0;
height: 3px;
bottom: 5px;
left: 0;
bottom: -3px;
z-index: 0;
position: absolute;
background: #000;
-webkit-transition: 0.3s ease-in-out;
-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
}
#primary li a:hover {
background-position: 0%;
}
#primary li a:hover:before {
width: 100%;
}