V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
jmyz0455
V2EX  ›  CSS

我这段 CSS3 Animation 代码为什么不能加载两段?

  •  
  •   jmyz0455 · 2017-06-09 16:17:08 +08:00 · 2556 次点击
    这是一个创建于 2702 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想实现一个动画效果,分两段完成。前半部分是先快后慢进入画面,后一半是匀速离开画面。先执行前者,结束后再执行后者,两段都结束后会不断重复这一过程。代码大概是这样的:

    @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;
    }
    

    我发现总是只能执行后半部分的动画,搜索到的答案都是加个 "," 分割即可,请问我这段代码有什么问题呢?

    8 条回复    2017-06-09 18:48:09 +08:00
    yangg
        1
    yangg  
       2017-06-09 16:26:43 +08:00 via iPhone
    元素:你要我怎样?
    yangg
        2
    yangg  
       2017-06-09 16:28:55 +08:00 via iPhone
    应该用 animation delay?
    learnshare
        3
    learnshare  
       2017-06-09 16:49:37 +08:00
    0 50% 100%,一个动画写两个过程不就好了
    jmyz0455
        4
    jmyz0455  
    OP
       2017-06-09 17:17:43 +08:00
    @learnshare 因为前后两部分的动画,如果能分开的话,别的样式也能分别使用这两个动画,提高复用度。
    而且别人说可以,我就想看能不能使用。
    learnshare
        5
    learnshare  
       2017-06-09 17:22:17 +08:00
    @jmyz0455 多写几行 CSS 没什么,如果介意,应该用 LESS/SASS 之类的提高编码效率
    jmyz0455
        6
    jmyz0455  
    OP
       2017-06-09 18:32:39 +08:00
    好吧,虽然我的关注点是别人可以我这边不行。
    ljcarsenal
        7
    ljcarsenal  
       2017-06-09 18:39:49 +08:00 via Android
    加 delay 吧
    kokdemo
        8
    kokdemo  
       2017-06-09 18:48:09 +08:00
    @jmyz0455 呃,第一次听说动画复用的……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2723 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 14:29 · PVG 22:29 · LAX 07:29 · JFK 10:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.