CODEWITHSUNDEEP
cssanimation
goJson
goJson

Reputation: 223

Why is my CSS animation not working?

http://jsfiddle.net/m93gLw7o/

Above link is the address of my code.

It's really weird. I stuied at w3school, and I think there is no wrong sentence in my code.

Why this code isn't working?

And below is the code.

html

<a id="siteLogo" class="siteLogo_ani" href="./">
    <img src="http://goo.gl/QafDup">
</a>

css

.siteLogo_ani {
    -webkit-animation-name: asdf;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 1;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;

    animation-name: asdf;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay:1;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@-webkit-keyframes asdf{
    from {float: left; width:355px; height:150px; display:block;}
    to   {float: left; width:160px; height:50px; display:block;}
}
@keyframes asdf{
    from {float: left; width:355px; height:150px; display:block;}
    to   {float: left; width:160px; height:50px; display:block;}
}

#siteLogo img{width:100%; height:100%;}

Upvotes: 1

Views: 6840

Answers (3)

Chad
Chad

Reputation: 5418

First of all, in reference to this thread, you are not able to utilize the display property via animations. Because of this, I would abstract your display property into .siteLogo_ani (I also put your ending width in that class, too) like thus:

.siteLogo_ani {
    -webkit-animation-name: asdf;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 1;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;

    animation-name: asdf;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay:1;
    animation-iteration-count: 1;
    animation-direction: normal;

    display: block;
    float: left;
    width: 160px;
}

This will leave your keyframes free to manipulate only one or two properties (and by putting your width in your original class, the keyframe ends at that style and will stay there):

@-webkit-keyframes asdf{
    from { width:355px; }
    to   { width:160px; }
}
@keyframes asdf{
    from { width:355px; }
    to   { width: 160px; }
}

#siteLogo img { width:100%; }

This way, it makes for a simpler animation, and leaves you with less to manipulate (I also took out a bunch of heights so the image doesn't lose its aspect ratio).

Check it out: http://jsfiddle.net/m93gLw7o/8/

Upvotes: 0

CeritT
CeritT

Reputation: 532

You should put display:block; in .siteLogo_ani class not in the animaton. It's not working because a has display:inline in default and does not have an exact width or height to pass to its child elements.

Upvotes: 0

Nick Rameau
Nick Rameau

Reputation: 1318

Because you're doing the animation to the 'a' tag, not to the image, so check the CSS here: http://jsfiddle.net/m93gLw7o/1/ You can see that I added the 'img' tag selector. Like so:

.siteLogo_ani img{

Upvotes: 1

Related Questions