I am using an animation to scroll some images on a new site I'm coding, but I've just discovered it doesn't work on Edge?
This is my code, does anyone know why it wouldn't be working? Seems odd that Edge wouldn't work being the latest :)
HTML
<div class="photobanner">
<a href="" class="first"><img src="images/debeer-refinish-logo-landscape.svg" width="150" height="47" alt="De-Beer Refinish" style="margin-top:16px;" /></a>
<a href=""><img src="images/dna-custom-paints-logo.svg" width="150" height="63" alt="Custom Paints" style="margin-top:8px;" /></a>
<a href=""><img src="images/earthsense-logo.svg" width="150" height="55" alt="EarthSense by Valspar" style="margin-top:12px;" /></a>
<a href=""><img src="images/sayerlack-logo-portrait.svg" width="150" height="60" alt="Sayerlack" style="margin-top:10px;" /></a>
<a href=""><img src="images/spralac-logo.svg" width="150" height="62" alt="Spralac" style="margin-top:9px;" /></a>
<a href=""><img src="images/vim-logo.svg" width="114" height="70" alt="Valspar Industrial Mix" style="margin-top:5px;" /></a>
<a href=""><img src="images/valspar-refinish-logo.svg" width="150" height="50" alt="Valspar Industrial Mix" style="margin-top:15px;" /></a>
<a href=""><img src="images/debeer-refinish-logo-landscape.svg" width="150" height="47" alt="De-Beer Refinish" style="margin-top:16px;" /></a>
<a href=""><img src="images/dna-custom-paints-logo.svg" width="150" height="63" alt="Custom Paints" style="margin-top:8px;" /></a>
<a href=""><img src="images/earthsense-logo.svg" width="150" height="55" alt="EarthSense by Valspar" style="margin-top:12px;" /></a>
<a href=""><img src="images/sayerlack-logo-portrait.svg" width="150" height="60" alt="Sayerlack" style="margin-top:10px;" /></a>
<a href=""><img src="images/spralac-logo.svg" width="150" height="62" alt="Spralac" style="margin-top:9px;" /></a>
<a href=""><img src="images/vim-logo.svg" width="114" height="70" alt="Valspar Industrial Mix" style="margin-top:5px;" /></a>
</div>
(S)CSS
.photobanner {
overflow: hidden;
height: 80px;
width: 1260px;
padding-bottom: 5px;
a {
display: inline-block;
width: 160px;
height: 80px;
margin: 0 10px;
background-color: #F9F9F9;
//background-color: #000000;
text-align: center;
overflow: auto;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
&:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove $banner-speed linear infinite;
-moz-animation: bannermove $banner-speed linear infinite;
-ms-animation: bannermove $banner-speed linear infinite;
-o-animation: bannermove $banner-speed linear infinite;
animation: bannermove $banner-speed linear infinite;
}
@keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: $banner-100;}
}
@-moz-keyframes bannermove {
0% {margin-left: 0px;}
100% {margin-left: $banner-100;}
}
@-webkit-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: $banner-100;}
}
@-ms-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: $banner-100;}
}
@-o-keyframes "bannermove" {
0% {margin-left: 0px;}
100% {margin-left: $banner-100;}
}
}
The site can be previewed at http://www.dbnz.co.nz/2016-preview/
Cheers in advance
Identifiers aren't supposed to be wrapped in quotes. Remove those and you should find that the animation begins working as expected in Microsoft Edge:
@keyframes "bannermove" {
...
}
Should instead be:
@keyframes bannermove {
...
}