CSS переход и анимация не работают в IE (работает в Firefox / Chrome) - PullRequest
Новая
       0

CSS переход и анимация не работают в IE (работает в Firefox / Chrome)

3 голосов
/ 20 декабря 2011

Как мне отредактировать мой код, чтобы он работал в IE.Отлично работает в Firefox и Chrome.Я не могу выяснить правильные атрибуты для вызова transition и animation в Internet Explorer. 

<html>
<head>
<title> Sample for Konstantin</title>
<style type="text/css">

.text p
{text-align:center;
margin-left:auto;
margin-right:auto;
left:50%;

}
.text {

    overflow: hidden;
    margin-bottom: 110px;
    }

.text h1 {
    color: black;
    font-family: 'footlight mt light';
    font-size: 50px;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: .9s;
    letter-spacing: -10px;

    }
    a { text-decoration:none }

    .text h1 span a {
        -webkit-transition: 0.9s ;
                color: #9C948D;
        }

        .text h1:hover span a {
            color: blue;
            }


</style>
</head>
<body>
    <center>

    <div class="text"><p><h1>This is a sample, <br />
   My Name is Matthew<br />Here is <span><a href="http://www.nba.com" >NBA Website</a>.</span><br />This is very simple<br />Here is  <span><a href="http://www.facebook.com" > Facebook!</a>.</span></h1>
</p></div>
</body></html>

РЕДАКТИРОВАТЬ: есть ли в любом случае использовать как блок div или что-нибудь, чтобы сделать аналогичный эффектв т.е?

Ответы [ 2 ]

7 голосов
/ 21 декабря 2011

IE10 - это первый IE, который поддерживает переходы. Я обычно либо игнорирую анимацию в старых браузерах (старый IE часто -> старый компьютер, поэтому анимация часто прерывистая).

Если это действительно необходимо, используйте jQuery для его исправления. Недостатком является то, что анимирующий цвет не встроен в jQuery, поэтому вам понадобится плагин.

0 голосов
/ 21 декабря 2011

Обратите внимание на «-webkit» часть вашего свойства CSS. Он будет работать только в браузерах webkit (Chrome + Safari). IE не поддерживает свойства CSS "-webkit"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...