CSS 动画从左到右

问题描述 投票：0回答：5

我正在尝试在

CSS
中制作动画。我在网上阅读了一些示例，但我无法弄清楚我做错了什么...... 我希望我的土豆图像从左到右，然后转身，然后再次回到左侧，但我可能在代码中弄乱了一些东西？有什么建议我做错了什么或者我应该如何面对这个问题吗？

这是我的代码：

#pot {
  bottom: 15%;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 5s;
}
@keyframes run {
  0% {
    left: 0;
  }
  50% {
    right: 0;
  }
  100% {
    left: 0;
    , transform: scaleX(-1);
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

html css animation
5个回答
53
投票

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

首先使动画从左到右，就像许多其他问题所示：

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 0;    
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

仅此解决方案的问题在于，土豆离右侧太远，因此在转身之前它会被从视口中推出。正如用户 Taig 建议的那样，我们可以使用 

transform: translate
解决方案，但我们也可以只设置 
50% { left: calc(100% - potatoWidth); }

第二个让动画从左到右移动，而不被推动 从视口出来：

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  50% { 
    left: calc(100% - 100px); 
   }
  100% {
    left: 0;     
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

最后让土豆转过来，这也是我在问题中要求的。为此，我们需要更改其 y 轴周围的变换。

请注意，如果我们让它只转动 50%，它会在移动的同时慢慢转动。所以我们需要指定土豆在

-webkit-transform: rotateY(0deg);
处的长度。在这个例子中，土豆直到进入动画的 48% 时才会转动，然后它就能在 48% 到 50% 的范围内转动。

第三步，让土豆在每个角落转动，这样它就不会向后移动：

#pot {
  bottom: 15%;
  position: absolute;
  -webkit-animation: linear infinite;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
}
@-webkit-keyframes run {
  0% {
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg); 
  }
  50% { 
    left: calc(100% - 100px);
    -webkit-transform: rotateY(180deg); 
  }
  98% {
    -webkit-transform: rotateY(180deg); 
  }
  100% {
    left: 0;    
     -webkit-transform: rotateY(0deg);
  }
}
<div id="pot">
  <img src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
</div>

19
投票

您必须在关键帧上仅使用“左”参数，而不是“右”参数。你的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;}
}

喜欢：在线版

8
投票

接受的答案有一个缺陷，即元素在动画过程中被完全推出视口。对于某些用例来说，这可能是需要的，但我想分享一个利用 CSS 

transform: translate
属性的更清晰的解决方案。

#pot {
  bottom: 15%;
  display: block;
  position: absolute;
  animation: linear infinite alternate;
  animation-name: run;
  animation-duration: 2s;
}

@-webkit-keyframes run {
    0% {
      left: 0;
      transform: translateX(0);
    }
    100% {
      left: 100%;
      transform: translateX(-100%);
    }
}
<img id="pot" src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width="100px" height="100px" />

我在这里更详细地介绍了这项技术：https://medium.com/@taig/dynamically-position-and-center-an-html-element-with-css-based-on-percentage-5fea0799a589 .

4
投票

看下面的代码，它工作正常。在下面的代码中，当您将鼠标悬停在土豆上时，它会从左到右运行图像，当您将鼠标悬停回来时，它会再次返回到左侧。而对象 3 div 从左到右运行每当您刷新页面时，都会有 2 个示例，您可以使用任何人。

.object {
    position: absolute;
}

.van {
    top: 45%;
    left: 44%;
}

#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

.object3 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
  /*  50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}*/
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
  /*  50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}*/
}
<html>
    <head>
    </head>
    <body>
        <div id="axis" class="one">
            <img class="object van move-right" src="https://i.sstatic.net/qgNyF.png?s=328&g=1" width=100px height=100px>
        </div>
        <div class="object3"></div>
    </body>
</html>

1
投票
<!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>

检查这个示例，它将一块红色 div 向右移动，然后再移回左侧

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.