0

Need anyone give me some suggestions

I am trying web page using CSS animation as fallows

index2.html

<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>CSS Animations</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="./box.css">
 </head>
 <body>
  <p>hello</p>
 </body>
</html>

box.css

p {
 animation-name: slidein;
 animation-duration: 3s;
}
@keyframes slidein {
 from {
  margin-left: 100%;
  width: 300%; 
 }
 to {
  margin-left: 0%;
  width: 100%;
 }
}

Those files are saved in same floder. My http server is using Apache 2.4

When I use ie11 to access "my_web_Server_address/index2.html" the animation is not working

Shoud I set something in my Apache 2.4? Am I missing something?

*I use ie11 and can display CSS animation form website such like https://www.w3schools.com/css/css3_animations.asp

**"my_web_Server_address" is local netwrok (192.168.x.x)

  • Welcome aboard :-) I am glad that you found the answer, but please note that this is the wrong site to ask such questions, and they will be closed without you getting any help. You should ask coding question son stackoverflow.com This site is for Software Recommendations. So you can ask, us to recommend a an IDE or a crypto library, or CSS minifier, but not how to fix your code. I hope that's clear and with you good luck :-) – Mawg says reinstate Monica Feb 10 at 11:36
1

Sorry,I got answer by myself.

I should specify the document which IE ver use in html file.

<meta http-equiv="x-ua-compatible" content="IE=10" >

index2.html is changed as fallows

<!DOCTYPE html>
<html lang="ja">
 <head>
 <title>CSS Animations</title>
 <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="IE=10" > 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="./box.css">
 </head>
 <body>
 <p>hello</p>
 </body>
 </html>

IF the server is request IE add fallow in httpd.conf in apache

LoadModule headers_module modules/mod_headers.so
<IfModule headers_module>
 Header set X-UA-Compatible: IE=11
</IfModule>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.