Why is my CSS animation not working?

Question

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%;}

Derp. I was trying to figure it out for a few, then I realized that an anchor is an inline element. Change `.siteLogo_ani` to `display: block;`. — Chad, Aug 15 '14 at 13:42
No.. it's not working. Or maybe the tag that have something inside can not have animation... is it right? — goJson, Aug 15 '14 at 13:49
For some reason, you can't manipulate the `display` property via animations. Referring to http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Chad, Aug 15 '14 at 13:53

score 1 · Answer 1 · answered Aug 15 '14 at 13:37

1

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{

answered Aug 15 '14 at 13:37

Nick Rameau

1,258
14
23

But I don't know why. if give animation to 'img' tag is possible, than give it to 'a' tag is also possible. isn't it? is 'a' tag can not have a animation? 'div' can have animation, and 'img' can have animation, but why 'a' tag can not have an animation? – goJson Aug 15 '14 at 13:42

score 0 · Answer 2 · answered Aug 15 '14 at 13:48

0

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.

answered Aug 15 '14 at 13:48

CeritT

522
3
12

score 0 · Accepted Answer · edited May 23 '17 at 12:20

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/

Thanks. now I know the css animation can not give display property to the object. — goJson, Aug 15 '14 at 14:04

Why is my CSS animation not working?

3 Answers3