Despite using both the -webkit-animation and animation, my animation does not work in Safari, only in Chrome and Firefox. The CSS code I have utilized is displayed below:
.bar{
height: 30px;
max-width: 800px;
margin: 0 auto 10px auto;
line-height: 30px;
font-size: 16px;
color: white;
padding: 0 0 0 10px;
position: relative;
}
.bar::before{
content: '';
width: 100%;
position: absolute;
left: 0;
height: 30px;
top: 0;
z-index: 0;
background: #ecf0f1;
}
.bar::after{
content: '';
background: #7CE1C9;
height: 30px;
display: block;
width: 100%;
-webkit-animation: bar-before 1 1.8s;
animation: bar-before-two 1 1.8s;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
@-webkit-keyframes bar-before{
0%{
width: 0px;
}
100%{
width: 100%;
}
}
@keyframes bar-before-two {
0%{
width: 0px;
}
100%{
width: 100%;
}
}
I am stumped on why this doesn't work on Safari but works on other browsers. Any suggestions would be greatly appreciated!