简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - 请教各位大神，css如何同时执行2个或者2个以上的动画效果？
伊谢尔伦
伊谢尔伦 2017-04-17 13:25:33
0
4
923

如题，我要在页面上让一个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滚动并且向前移动？

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

membalas semua(4)
刘奇
刘奇2017-04-17 13:27:33 Tingkat 4 
transform: translateX(300px) rotate(360deg);
Suka +0
Tambah Balasan
左手右手慢动作
左手右手慢动作2017-04-17 13:27:33 Tingkat 3

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

Suka +0
Tambah Balasan
左手右手慢动作
左手右手慢动作2017-04-17 13:27:33 Tingkat 2

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

Suka +0
Tambah Balasan
巴扎黑
巴扎黑2017-04-17 13:27:33 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！