CODEWITHSUNDEEP
htmlcsscss-animations
user1605763
user1605763

Reputation: 59

Why don't @-webkit-keyframes animation work?

My problem is the @-webkit-keyframes animation does not work and I did not see any clue... All the other parts work well including the background color and font color transition. Here is the HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body id="body">

<nav>
    <ul id="nav">
        <li><a href="#" class="link"><div class="content"><span class="span">About</span></div></a></li>
        <li><a href="#" class="link"><div class="content"><span class="span">Skills</span></div></a></li>
        <li><a href="#" class="link"><div class="content"><span class="span">Works</span></div></a></li>
        <li><a href="#" class="link"><div class="content"><span class="span">Contact</span></div></a></li>
    </ul>
</nav><br />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="jquery_ui.js"></script>
</body>

</html>

CSS:

#nav{
    list-style:none;
    margin:40px auto;
    padding:0;
    width: 820px;
}
#nav li{
    width: 200px;
    height: 300px;
    overflow: hidden;
    position: relative;
    float: left;
    background: #00D8CC;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 2px;
    -webkit-transition: all 300ms linear;
}

#nav li:last-child {
    margin-right: 0px;
}

#nav li a{
    display:block;
    text-align: center;
    position: relative;
    height: 100%;
    color: #333;
}

.content {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
}

.span {
    font-size: 30px;
    opacity: 0.8;
    text-align: center;
    line-height: 40px;
    -webkit-transition: all 300ms linear;
}

#nav li:hover {
    background-color: #00AAAA;

}

#nav li:hover .span{
    color: green;
    -webkit-animation: move 300ms ease;
}

@-webkit-keyframes move { 
    from {
            -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
            -webkit-transform: translateX(0%) rotate(0deg);
    }
}

Thank you.

Upvotes: 0

Views: 3795

Answers (2)

Weedy101
Weedy101

Reputation: 13

A couple of quick points,

1 - nav and span are both elements not id's or classes

2 - you have no @keyframes move, or transition all attribute to activate it plus your timming being in milliseconds will cause some new browser's to hang as they all seem to expect the 0.3s decimal value instead.

2 - In addition animations and some transitions of this level can only be applied to the containing element ie to the div, nav, header, section, article, footer etc that contains the item you wish to animate. One solution would be to use the display: inline-blocks; method of alignment and place individual sections in separate containers, this will require the first-child to have the suedo element ::before (and a second :before to support some older browsers) and the primary container to have the suedo element of ::after (;after) to force justification for correct alignment. There are several quality examples of how to achieve this on the 'Codr0ps' site - http://tympanus.net/codrops/

Upvotes: 0

ryanbrill
ryanbrill

Reputation: 2011

It's a display issue with the <span>. If you set it to display: block; it should work. See http://jsfiddle.net/ryanbrill/mdb7X/

Upvotes: 2

Related Questions