2

我正在尝试为导航栏按钮设置动画，我希望 li 标签背景中的图像上下弹跳，而文本（图像）保持静止。

我知道没有用于动画背景图像的直接 CSS 方法，但是我试图考虑到这一点。

请参阅下面的 JSFiddle 链接以获取我的代码：

http://jsfiddle.net/JTp6x/

#Home
{ 
    position: absolute;
    width:125px;
    height:100px;
    background: transparent url('Images/Icons/HomeIcon.png') no-repeat top center;
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;}
.animated.hinge
{
-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
        40% {-webkit-transform: translateY(-30px);}
    60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-30px);}
    60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-30px);}
    60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

#Home:hover {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}

是动画方法和动画的关键帧

4

1 回答 1

1

实际上，只要满足某些条件，就可以在不移动内容的情况下在 CSS 中为背景图像设置动画。

您的图像的链接是一个相对链接，并且您的代码有一些阻碍，所以我从头开始创建了一个新的小提琴，它使用了 wikimedia commons 上的图像，它应该向您展示类似弹跳的效果如何达到。根据您所说的您要尝试做的事情，我将其放在一个<li>元素中，并粗略地重用了您的@keyframes.

小提琴在这里：http: //jsfiddle.net/raphaelvalerio/SbAkP/

<ul>
    <li id="bouncy-background">stuff that absolutely should not move at all in any way. Ever.</li>
    <li>another item</li>
    <li>another item</li>
</ul>

CSS（为简洁起见删除了供应商前缀。完整版本请参见小提琴）：

#bouncy-background {
width: 100%;
height: 400px;
background-color: goldenrod;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/71/William_Shatner.jpg');
background-repeat: no-repeat;
background-size: auto 200px;
background-position: center bottom;
animation-name: bounce;
animation-duration: 2s;
animation-fill-mode: both;
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {background-position: center bottom;} 
40% {background-position: center top;}
60% {background-position: center 75%;}
}

这里重要的是你正在制作动画。您可以为大多数具有计算值的元素设置动画，例如百分比、像素等。在这种情况下，我不是在为背景本身设置动画，而是为background-position规则设置动画，因为它是一个计算值。

看看小提琴并玩弄它，看看你是否可以把我的食谱改成符合你想法的东西。

另请注意，目前动画只是在加载时开始，但您可以将其连接到伪选择器事件，如:hover.

于 2013-03-29T01:50:23.327 回答