编程练习2-16的问题

来源：3-1 @keyframes

Sean流蘇線條3849092

2017-02-06 16:20:38

我看到给的初始代码里已经把箭头旋转90度朝下，就直接写了一个朝下进行translate20px的动画，但是运行后发现箭头的方向又变回了原来的>这个方向

bottom:35px;

            animation: moves linear  alternate .5s infinite;

        @keyframes moves {
        from { transform: translate(0);   }
        to   { transform: translate(0 ,20px); }
}

然后我调整代码最后变成这样

@keyframes moves {

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

to { transform: rotate(90deg) translate(20px ,0); }

}

才变成要求的效果，请问这是什么原因？

写回答

1回答

小于飞飞

2017-02-06

已采纳

注意可以测试下，transform: rotate和transform: translate分开写，相应属性会失效，可以看做是一个属性，后面的覆盖了前面的，transform运用多个值时，其之间必须使用空格分隔，要这样写如：transform: rotate(90deg) translate(0); 另一种思路：@keyframes中改变的是top或者bottom值，也可以实现。希望对你有帮助，祝学习愉快，欢迎采纳。

hean流蘇線條3849092

h 非常感谢！

h017-02-07

共1条回复

0 学习 · 5760 问题

查看课程

相似问题

2-16 编程练习

回答 1

2-16编程练习

回答 1

2-5 编程练习思路

回答 1

2-22编程练习

回答 1

2-10编程练习问题

回答 2

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