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)

0

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>

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.