amp-boilerplate is not working

Question

I am using x-cart 4.7.6. I have added amp tags in the .tpl files within the x-cart template (skin folder).

All tags are working, But I am getting internal server error while adding below tags "amp-boilerplate"

<style amp-boilerplate>
  body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
  @-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
  @-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
  @-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
  @-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
  @keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
  body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript>

Please provide suggestion why i am getting and how to resolve it?

Answer 1

Finally, I found the cause of this issue. We have to give the space between flower brackets and style.

old script:

body {-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;}

new script:

body { -webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none; }

It is working without space in other php files but not working in x-cart only.

Answer 2

I found the solution for this problem : you should only add @ like this :

    <style amp-boilerplate>
 body{ -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
<noscript>
<style amp-boilerplate>
    body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none;
    }
</style></noscript>

I use visual stadio and this is work for me