CSS transition and animation not working in IE (works in Firefox/Chrome)

By : matture
Source: Stackoverflow.com

How can I edit my code to make it work in IE. It works great in Firefox and Chrome. I can't figure out the correct attributes for calling the transition and animation in Internet Explorer.

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

.text p

.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;


    <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>

EDIT: is there anyway to use like a div block or anything to make a similar effect in ie?

By : matture


Notice the "-webkit" part of your CSS property. It will only work in webkit browsers (Chrome Safari) IE does not support "-webkit" CSS properties

This video can help you solving your question :)
By: admin