Html CSS动画从左到右_Html_Css_Animation

Html CSS动画从左到右

html css animation

Html CSS动画从左到右,html,css,animation,Html,Css,Animation,我正在尝试在CSS中制作动画。我在网上读了一些例子，但我不知道我做错了什么。。。我想让我的土豆图像从左到右，然后转过身，然后再回到左边，但我可能弄乱了代码中的某些东西？有什么建议我做错了什么，或者我应该如何面对这个问题吗这是我的密码： #pot{ 底部：15%；位置：绝对位置； -webkit动画：线性无限交替； -webkit动画名称：run； -webkit动画持续时间：5s； } @-webkit关键帧运行{ 0% { 左：0； } 50% { 右：0； } 100% { 左：0；

我正在尝试在

CSS

中制作动画。我在网上读了一些例子，但我不知道我做错了什么。。。我想让我的土豆图像从左到右，然后转过身，然后再回到左边，但我可能弄乱了代码中的某些东西？有什么建议我做错了什么，或者我应该如何面对这个问题吗

这是我的密码：

#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限交替；
-webkit动画名称：run；
-webkit动画持续时间：5s；
}
@-webkit关键帧运行{
0% {
左：0；
}
50% {
右：0；
}
100% {
左：0；
，webkit转换：scaleX（-1）；
}
}

您必须在关键帧上仅使用“left”而不是“right”参数。你的css上也有一些打字错误，“比例”看起来也没用

#pot{
    bottom:15%;
    position:absolute;
    -webkit-animation:linear infinite alternate;
    -webkit-animation-name: run;
    -webkit-animation-duration: 5s;
}     
@-webkit-keyframes run {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}

比如：


div{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
动画名称：示例；
动画持续时间：4s；
动画迭代次数：3
}
@-webkit关键帧示例{
0%{背景色：红色；左侧：0px；顶部：0px；}
25%{背景色：黄色；左侧：200px；顶部：0px；}
100%{背景色：红色；左侧：0px；顶部：0px；}
}

检查此示例，它将红色div块向右移动，然后再向左移动

请参见下面的代码，它工作正常。在下面的代码中，当您将鼠标悬停在土豆上时，它会从左向右运行图像，当您将鼠标悬停在土豆上时，它会再次从左向左运行。而每当刷新页面时，对象3 div会从左向右运行，其中有2个例如，你可以使用任何人

.object{
位置：绝对位置；
}
范先生{
最高：45%；
左：44%；
}
#轴：悬停。向右移动{
转换：转换（350px，0）；
-webkit转换：翻译（350px，0）；/**Chrome和Safari**/
-o变换：平移（350px，0）；/**Opera**/
-moz转换：翻译（350px，0）；/**Firefox**/
}
.反对{
位置：绝对位置；
过渡：所有2个易于输入输出；
-webkit过渡：所有2个易于输入输出；/**Chrome和Safari**/
-moz转换：所有2个易于输入输出；/**Firefox**/
-o型过渡：所有2个易于进出；/**Opera**/
}
.3反对意见3{
宽度：100px；
高度：100px；
背景色：红色；
位置：相对位置；
-webkit动画名称：示例；/*Safari 4.0-8.0*/
-webkit动画持续时间：4s；/*Safari 4.0-8.0*/
动画名称：示例；
动画持续时间：4s；
}
/*Safari 4.0-8.0*/
@-webkit关键帧示例{
0%{背景色：红色；左侧：0px；顶部：0px；}
25%{背景色：黄色；左侧：200px；顶部：0px；}
/*50%{背景色：蓝色；左侧：200px；顶部：200px；}
75%{背景色：绿色；左侧：0px；顶部：200px；}
100%{背景色：红色；左侧：0px；顶部：0px；}*/
}
/*标准语法*/
@关键帧示例{
0%{背景色：红色；左侧：0px；顶部：0px；}
25%{背景色：黄色；左侧：200px；顶部：0px；}
/*50%{背景色：蓝色；左侧：200px；顶部：200px；}
75%{背景色：绿色；左侧：0px；顶部：200px；}
100%{背景色：红色；左侧：0px；顶部：0px；}*/
}

接受的答案有一个缺陷，即在动画过程中元素被完全推出视口。某些用例可能需要这样做，但我想分享一个更干净的解决方案，利用CSS

transform:translate

属性

#pot{
底部：15%；
显示：块；
位置：绝对位置；
动画：线性无限交替；
动画名称：run；
动画持续时间：2秒；
}
@-webkit关键帧运行{
0% {
左：0；
变换：translateX（0）；
}
100% {
左：100%；
转化：translateX（-100%）；
}
}

由于这个问题仍然受到很多关注，而且没有一个解决方案能够提供我试图获得的完整答案，我将举一个几年前我是如何解决这个问题的例子

首先让动画从左到右，就像许多其他问题一样：

#pot{
底部：15%；
位置：绝对位置；
-webkit动画：线性无限；
-webkit动画名称：run；
-webkit动画持续时间：5s；
}
@-webkit关键帧运行{
0% {
左：0；
}
50% {
左：100%；
}
100% {
左：0；
}
}

尝试使用

50%{left:100%；}

而不是

50%{right:0；}

-这在你的小提琴中对我有用啊，很有效，谢谢@Andrew！我在编辑中删除了问题标题中的“[在评论中解决]”。发布您自己的答案，接受给出的答案或删除问题。对动画方向使用alternate是多余的，没有它，代码的行为将相同，或者对动画方向使用

normal

，由于交替效果在关键帧定义中处理。您是否会添加将屏幕推到最大右侧的版本，例如浏览器通知。这太棒了！你知道如何让土豆从左到右无限循环吗？所以现在是从左到右；完成；从右向左；完成。。。等等，可以从左到右进行；完成；从左到右；完成了吗？

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name :example;
    animation-duration: 4s;
    animation-iteration-count: 3
}


@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    100% {background-color:red; left:0px; top:0px;}
}


</style>
</head>
<body>