suchen

Heim  >  Fragen und Antworten  >  Hauptteil

html5 - 请教各位大神，css如何同时执行2个或者2个以上的动画效果？

如题，我要在页面上让一个p通过rotate() 属性顺时针旋转并且还要通栏translateX()这个属性像前移动，但是这样写只能执行一个！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box{
    width:200px;
    height:200px;
    background:red;
    animation:donghua 2s ease 1s forwards;
}
@keyframes donghua{
    0%{
        transform:translateX(0);
        transform:rotate(0);
    }
    100%{
        transform:translateX(300px);
        transform:rotate(360deg);
    }

}
</style>
</head>

<body>
    <p id="box">
        
    </p>
</body>
</html>

这样写p只能执行一个动画效果，如何实现2个动画效果同事执行了呢？ 就是让该p滚动并且向前移动？

伊谢尔伦伊谢尔伦2784 Tage vor947

Antworte allen(4)Ich werde antworten

  • 怪我咯

    怪我咯2017-04-17 13:27:33

    transform: translateX(300px) rotate(360deg);

    Antwort
    0
  • ringa_lee

    ringa_lee2017-04-17 13:27:33

    transform: translateX(300px) rotate(360deg);

    Antwort
    0
  • ringa_lee

    ringa_lee2017-04-17 13:27:33

    同时进行要写在一个transform里面，例如一楼那样

    Antwort
    0
  • 巴扎黑

    巴扎黑2017-04-17 13:27:33

    可以写两个动画效果同时引入，animation:donghua 1s .8s both,donghua1 1s .6s forwards;

    Antwort
    0
  • StornierenAntwort