2-16前面0.5秒不动是怎么做到的？试了好多次都搞不懂。

首页课程实战体系课手记专栏慕课教程

来源：3-1 @keyframes

MR帽子先生

2017-03-14 22:42:04

<!DOCTYPE html>

<html>

<head>

div {

font-family: Arial;

font-size: 72px;

font-weight: bold;

position: fixed;

right: 0;

left: 0;

width: 30px;

height: 30px;

margin: auto;

transform:rotate(90deg) ;

bottom: 50px;

animation:moveto linear 0.5s 0.5s infinite normal;

}

@-webkit-keyframes moveto {

from { transform: translateY(0%) rotate(90deg); }

to { transform: translateY(100%) rotate(90deg); }

}

@-o-keyframes moveto {

from { transform: translateY(0%) rotate(90deg); }

to { transform: translateY(100%) rotate(90deg); }

}

@-moz-keyframes moveto {

from { transform: translateY(0%) rotate(90deg); }

to { transform: translateY(100%) rotate(90deg); }

}

@keyframes moveto {

from { transform: translateY(0%) rotate(90deg); }

to { transform: translateY(100%) rotate(90deg); }

}eyframes:;

</style>

</head>

<body>

</body>

</html>

写回答

1回答

樱桃小胖子

2017-03-14

已采纳

有两种解决方案都可以。

第一，再写一个设置div1透明度为 0 的动画，时长 2s，刚好掩盖掉 animations2 的 2s 延时，让它们在div上同时播放。

第二，修改 animations2，不要延时 2s，而把这 2s 放到 keyframes 里面作为动画的一部分，譬如：可以把整个动画看成 5s，0%, 40% { opacity: 0; top: 130px; }，100% 部分不变，效果和延时是一样的。

hR帽子先生

h 非常感谢！！！！

h017-03-15

共1条回复

0 学习 · 5760 问题

查看课程

相似问题

怎么设置每次循环都延迟0.5s啊？

回答 4

动画不能动是哪里写错了？

回答 3

2-16编程联系

回答 1

2-16编程怎么每一次延迟.5s？

回答 1

延迟0.5秒问题

回答 2

打开慕课网App查看更多内容