Html 动画按钮css

我试图在一个按钮上做一个

css

动画，从左到右和从右到左（快速）移动，然后停下来再做同样的动作

HTML和样式

按钮{
背景：红色；
位置：相对位置；
-webkit动画：mymove无限；
/*Safari 4.0-8.0*/
-webkit动画持续时间：6s；
/*Safari 4.0-8.0*/
动画：mymove无限；
动画持续时间：1s；
}
/*Safari 4.0-8.0*/
@-webkit关键帧mymove{
从{
左：0px；
}
到{
左：10px；
}
}
@关键帧mymove{
从{
左：0px；
}
到{
左：10px；
}
}

---

值

您可以使用

关键帧

百分比来处理事件，如下所示：

按钮{
背景：红色；
位置：相对位置；
动画：mymove无限；
动画持续时间：10秒；
}
/*Safari 4.0-8.0*/
@-webkit关键帧mymove{
0% {
左：0%；
}
50% {
左：100%
}
100% {
左：0；
}
}

value

您想要这个吗

按钮{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
-webkit动画：MyFirst5s2；
/*Safari 4.0-8.0*/
-webkit动画方向：交替；
/*Safari 4.0-8.0*/
动画：MyFirst5s2；
动画方向：交替；
}
/*Safari 4.0-8.0*/
@-webkit为myfirst设置关键帧{
0% {
背景：红色；
左：0px；
顶部：0px；
}
25% {
背景：黄色；
左：200px；
顶部：0px；
}
50% {
背景：蓝色；
左：200px；
顶部：200px；
}
75% {
背景：绿色；
左：0px；
顶部：200px；
}
100% {
背景：红色；
左：0px；
顶部：0px；
}
}
@关键帧myfirst{
0% {
背景：红色；
左：0px；
顶部：0px；
}
25% {
背景：黄色；
左：200px；
顶部：0px；
}
50% {
背景：蓝色；
左：200px；
顶部：200px；
}
75% {
背景：绿色；
左：0px；
顶部：200px；
}
100% {
背景：红色；
左：0px；
顶部：0px；
}
}

---

go

对于关键帧，您可以使用%而不是

from

和

to

这样你就可以更好地控制时间了

多亏了我能用这个数字，我想你不需要前缀

无论如何，您可以使用百分比而不是“to”和“from”，因此您可以非常具体

按钮{
背景：红色；
位置：相对位置；
动画：mymove无限3s；
}
@关键帧mymove{
0%{左：0px；}
10%{左：10px；}
70%{左：10px；}
100%{左：0px；}
}

---

value

您可以在关键帧中使用%值

按钮{
背景：红色；
位置：相对位置；
动画：mymove无限；
动画持续时间：1s；
}
@关键帧mymove{
0% {
左：0px；
}
1% {
左：10px；
}
2% {
左：0px；
}
98% {
左：0px；
}
99% {
左：10px；
}
100% {
左：0px；
}
}

值

尝试这些并在左边距中更改：50px用于增加或减少移动区域

按钮{
背景：红色；
位置：相对位置；
-webkit动画：mymove无限；
/*Safari 4.0-8.0*/
-webkit动画持续时间：1.5s；
/*Safari 4.0-8.0*/
动画：mymove交替无限；
动画持续时间：1.5s；
}
@-webkit关键帧mymove{
0% {
左边距：0px；
}
50% {
左边距：50像素；
}
100% {
左边距：0px；
}
}

---

value

它的移动非常奇怪..，我想在用户看到它时引起用户的注意，你知道我的意思吗？我不明白你到底想做什么。让一个按钮移动到无穷远真的很奇怪。因为当用户试图点击它时，按钮可能会在此时移动，一些用户会错过按钮。你没有更多的代码或设计要发送给我们吗？它的移动非常古怪..，当用户看到它时，我想引起用户的注意，你知道我的意思吗？@Newme抱歉，我不完全理解。如果要减慢速度，只需更改

动画持续时间

属性。