Nested @keyframe definition does not apply to parent

Not reproducible Issue #7763541

Details

Created
Jun 2, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Keyframe animations declared within an element cannot be applied to the container in which they are declared (ie11 + edge). The really strange thing is that this behaviour does work in ie10.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div style="animation: my-animation 1s infinite">
        Should animate!

        <style>
            @keyframes my-animation {
                to {
                    font-size: 10px;
                }
                from {
                    font-size: 15px;
                }
            }
        </style>
    </div>
</body>
</html>

Attachments

0 attachments

    Comments and activity

    • Sorry, the example I posted was not accurate enough. The one below actually breaks. The problem is that if the animation name is set on an element before the animation exists then it never gets applied. You can fix it by opening the developer tools and toggling the animation name

      
      
      
          
          test
      
      
      
      
      
          Should animate!
          
      
      
      
      
      
      
      
      
      
    • Posting the example again - not sure why the formatting on the last one got messed up

      
      
      
          
          test
      
      
      
      
      
          Should animate!
          
      
      
      
      
      
      
      
      
      
    • Well that is lame - the preview renders correctly but the server rendered one is not :(

    • To get around that problem I have attached the raw html to this issue.

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • I do not see any attachments to this exact issue, but I do see some HTML and CSS code that does not seem to repro the problem reported (seeing the same thing in Chrome 52 and Edge 10586.

      Can you try to re-attach / upload the item again please?

    • Sadly I could not upload the file:

      Unexpected error!
      The page you are trying to access isn’t available right now. Please try again soon.

      Error correlation ID: 3f9839d2-24f5-4181-8702-3ad823d69f70
      Error correlation vector: evmYx6BM+ESriD0Y.1
      App server: microsoft-edge
      Time: 02 Jun 2016 16:13:01 -07:00

    • File upload is still not working to here is another try:

      
      
      
          
          test
      
      
      
      
      
          Should animate!
          
      
      
      
      
      
      
      
      
      
    • Sigh

    • Microsoft Edge Team

      Changed Status to “Not reproducible”

    • Going to close this out as not repro. If you can get an uploaded repro going please update the item so we can investigate.

      Best regards,
      The MS Edge Team

    You need to sign in to your Microsoft account to add a comment.

    Sign in