我想实现一个动画效果,分两段完成。前半部分是先快后慢进入画面,后一半是匀速离开画面。先执行前者,结束后再执行后者,两段都结束后会不断重复这一过程。代码大概是这样的:
@keyframes over {
from {
left: -100px;
}
to {
left: calc(50% - 50px);
}
}
@keyframes down {
from {
left: calc(50% - 50px);
}
to {
left: calc(100% + 100px);
}
}
.move {
position: absolute;
animation: over 1s ease-in-out infinite, down 1s linear infinite;
}
我发现总是只能执行后半部分的动画,搜索到的答案都是加个 "," 分割即可,请问我这段代码有什么问题呢?
1
yangg 2017-06-09 16:26:43 +08:00 via iPhone
元素:你要我怎样?
|
2
yangg 2017-06-09 16:28:55 +08:00 via iPhone
应该用 animation delay?
|
3
learnshare 2017-06-09 16:49:37 +08:00
0 50% 100%,一个动画写两个过程不就好了
|
4
jmyz0455 OP @learnshare 因为前后两部分的动画,如果能分开的话,别的样式也能分别使用这两个动画,提高复用度。
而且别人说可以,我就想看能不能使用。 |
5
learnshare 2017-06-09 17:22:17 +08:00
@jmyz0455 多写几行 CSS 没什么,如果介意,应该用 LESS/SASS 之类的提高编码效率
|
6
jmyz0455 OP 好吧,虽然我的关注点是别人可以我这边不行。
|
7
ljcarsenal 2017-06-09 18:39:49 +08:00 via Android
加 delay 吧
|