CODEWITHSUNDEEP
cssanimatedmicrosoft-edge
dpDesignz
dpDesignz

Reputation: 1959

CSS Scrolling Animation not working in Edge

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

Upvotes: 2

Views: 2173

Answers (2)

Sampson
Sampson

Reputation: 268344

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 {
    ...
}

Upvotes: 1

Joe Raio
Joe Raio

Reputation: 1805

animations do work in Edge but you will need to make some changes to your code. I followed the W3C Standard located here that is fully supported by Microsoft Edge. I was able to get the banner to animate with a few small changes. Again, this is not the completed code but a step in the right directions so you can resolve your issue.

Hope this helps!

CSS 

.photobanner {
    overflow: hidden;
    height: 80px;
    width: 1260px;
    padding-bottom: 5px; 
    position: relative;
}
.photoSlider {
    position: absolute;
    width: 1260px;
    height: 80px;
    left: 0;
    top: 0;
    animation-name: horizontal-slide;
    animation-duration: 30s;
    animation-iteration-count: infinite;    
    animation-timing-function: linear;  
}           
@keyframes horizontal-slide {
    from {
        left: 0;
        top: 0;
    }
    to {
        left: -1200px;
    }
}

HTML

<div class="photobanner">
    <div class="photoSlider">
        <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>
</div>

Upvotes: 2

Related Questions