4-2作业问题

老师给的批复是@keyframes可以只定义一次,但是定义一次的话我做不到示例里的效果.就是一开始的时候云的定位并不是一样,好比有的云动画开始时是在right:20%的位置,有的是right:10%,有的是right:25%.如果我这样写,那每朵云在动画开始时都是从最右边飘出的,即使我把每朵云都定位了也是没有效果的,以下是部分代码

div.cloud.c2 {
    top: 35%;
    right: 20%;   //即使我定义了云的位置,但是云仍然是从最右边开始飘出
    opacity: 0.6;
    -webkit-transform: scale(0.6);
       -moz-transform: scale(0.6);
        -ms-transform: scale(0.6);
         -o-transform: scale(0.6);
            transform: scale(0.6);
    -webkit-animation: cloudmove 7s linear infinite;
       -moz-animation: cloudmove 7s linear infinite;
        -ms-animation: cloudmove 7s linear infinite;
         -o-animation: cloudmove 7s linear infinite;
            animation: cloudmove 7s linear infinite;
}

@keyframes cloudmove {
    0% {
        right: -10%;
    }
    100% {
        right: 110%;
    }
}

洋葱宝宝 2017-06-02

源自：CSS3图片切换特效 4-1 响应式

收起

2回答

提问者洋葱宝宝 2017-06-02 20:40:19

/*白云*/
div.cloud.c1 {
    top: 20%;
    right: 10%;
    opacity: 0.8;
    -webkit-transform: scale(0.8) translateX(-50%);
       -moz-transform: scale(0.8) translateX(-50%);
        -ms-transform: scale(0.8) translateX(-50%);
         -o-transform: scale(0.8) translateX(-50%);
            transform: scale(0.8) translateX(-50%);
    -webkit-animation: cloudmove 6s linear infinite;
       -moz-animation: cloudmove 6s linear infinite;
        -ms-animation: cloudmove 6s linear infinite;
         -o-animation: cloudmove 6s linear infinite;
            animation: cloudmove 6s linear infinite;
}
div.cloud.c2 {
    top: 35%;
    opacity: 0.6;
    -webkit-transform: scale(0.6) translateX(-250%);
       -moz-transform: scale(0.6) translateX(-250%);
        -ms-transform: scale(0.6) translateX(-250%);
         -o-transform: scale(0.6) translateX(-250%);
            transform: scale(0.6) translateX(-250%);
    -webkit-animation: cloudmove 7s linear infinite;
       -moz-animation: cloudmove 7s linear infinite;
        -ms-animation: cloudmove 7s linear infinite;
         -o-animation: cloudmove 7s linear infinite;
            animation: cloudmove 7s linear infinite;
}
/*白云动画*/
@-webkit-keyframes cloudmove {
    0% {
        right: -10%;
    }
    100% {
        right: 110%;
    }
}

@-moz-keyframes cloudmove {
    0% {
        right: -10%;
    }
    100% {
        right: 110%;
    }
}

@-ms-keyframes cloudmove {
    0% {
        right: -10%;
    }
    100% {
        right: 110%;
    }
}

@-o-keyframes cloudmove {
    0% {
        right: -10%;
    }
    100% {
        right: 110%;
    }
}

@keyframes cloudmove {
    0% {
        right: -10%;
    }
    100% {
        right: 110%;
    }
}

测试下来感觉这个方法是可行的,不过不知道是不是最优的.

收起回答

小于飞飞 2017-06-02 16:20:05

你好，可以定义多次，但是老师建议也可以考虑定义一次，来优化代码，可以使用@keyframes 定义运动最右位置到左位置（云都从最右侧开始运动），那他们出现的不同顺序，通过animation: cloudmove 7s linear infinite; 中的时间及周期来体现，比如第一朵云运动10s , 第二朵云运动15s ，以此类推不同的运动时间，所以会出现同一段距离里不同运动时间完成，出现不同运动前后。希望对你有帮助。

收起回答

提问者洋葱宝宝 #1

你说的这些我知道,我现在的问题是想把每朵云的起始位置(X轴)设置成不同的,目前想了一个解决的方法,就是给每朵云加一个translateX.

2017-06-02 20:37:54
樱桃小胖子回复提问者洋葱宝宝 #2

.x1 { animation: moveclouds 30s linear infinite; } .x2 { left: 200px; transform: scale(.6); animation: moveclouds 50s linear infinite; opacity: .6; } .x3 { top: -200px; left: -250px; transform: scale(.8); animation: moveclouds 40s linear infinite; opacity: .8; } .x4 { top: -250px; left: 470px; transform: scale(.75); animation: moveclouds 36s linear infinite; opacity: .75; } .x5 { top: -150px; left: -150px; transform: scale(.8); animation: moveclouds 37s linear infinite; opacity: .8; } @keyframes moveclouds { from { margin-left: 100%; } to { margin-left: -100%; } }可以这样定义，会更简单一些，不过你的实现方案也不错哦~

2017-06-03 18:59:32
提问者洋葱宝宝回复樱桃小胖子 #3

非常感谢！

2017-06-03 19:20:05