简体中文(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
916

如题，我要在页面上让一个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伐。

reply all(4)
刘奇
刘奇2017-04-17 13:27:33 4 floor 
transform: translateX(300px) rotate(360deg);
Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-17 13:27:33 3 floor

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

Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-17 13:27:33 2 floor

To perform simultaneous operations, it must be written in a transform, such as the one on the first floor

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-17 13:27:33 1 floor

You can write two animation effects to be introduced at the same time, animation: donghua 1s .8s both, donghua1 1s .6s forwards;

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！