css – 将两个动画添加到一个对象[到图像]

2019年7月28日 177次阅读

我希望两个动画被赋予一个图像,一个是在页面加载时反弹,第二个是它应该在它被反弹后开始摆动.

我已经为两个不同的图像实现了这一点,但是,当我将这两个图像混合成一个时,只有一个动画正在工作.其他动画效果被覆盖.

我为swinging和bounce创建了一个JSfiddle.

ul { list-style-type:none;}
@-webkit-keyframes swinging {
    0% {
        -webkit-transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(10deg);
    }
}
@keyframes swinging {
    0% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
}
.swingimage {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
}
 <ul class="nav navbar-nav pull-right">
  <li class="">
   <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage"          width="200"  height="200" > </a>
  </li>
 </ul>

任何帮助将不胜感激.谢谢

最佳答案 你不能在同一个对象上添加2个不同的动画.所以..

在li上使用第一个动画(dropHeader),在img上使用第二个动画(swingHeader)

见jsfiddle> jsFiddle

或下面的片段

如果你希望它在第一个完成后启动,则在第二个(swingHeader)的持续时间等于或大于第二个(swingHeader)上添加动画延迟

在你的情况下动画延迟：0.5秒或更大

ul { list-style-type:none;}
@-webkit-keyframes swinging {
    0% {
        -webkit-transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(10deg);
    }
}
@keyframes swinging {
    0% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
                transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }
}
.swingimage {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
    animation: swinging 3.5s ease-in-out forwards infinite;
    animation-delay:0.5s;
}
.bounce-effect  {

    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.5s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateY(-40px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateY(-40px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}
 <ul class="nav navbar-nav pull-right">
  <li class="bounce-effect ">
   <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f5/Loxoceles_reclusa_iconized_thread.png" class="swingimage"          width="200"  height="200" > </a>
  </li>
 </ul>
点赞