如何使用CSS根据动和停的汽车对车轮进行动画处理？

时间：2019-11-18 10:31:50

标签： html css css-animations

我正在尝试使用CSS为汽车设置动画。我设法使车轮和汽车动起来了。

汽车进站，停车然后下车。该动画会循环播放。

现在，当汽车停下来时，我也需要停止轮子。但我似乎无法实现。

这是我到目前为止所拥有的：

@keyframes wheel{
 0%{
   transform: rotate(0deg)
  }
  
    35% {
    transform: rotate(-90deg)
  }
  36%,
  56% {
    transform: rotate(-180deg)
  }
  
 100%{
   transform: rotate(-359deg)
  }
}

@keyframes moving {
  0% {
    right: -80em;
    animation-timing-function: ease-out;
  }
  35% {
    right: 0;
  }
  36%,
  56% {
    right: 0;
    animation-timing-function: ease-in;
  }
  100% {
    right: 120%;
  }
}

@keyframes stableWheel {
  from {transform: translateY(-.0em);}
  to {transform: translateY(-.0em);}
}


.car{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  width: 600px;
  height:271px;
  overflow:hidden;
    animation: moving 10s linear -2s infinite;
}
.carbody{
  animation: carmove 3.1s infinite linear;
  background: url('https://i.stack.imgur.com/xWNOG.png') 0 0;
  background-size: cover;
  height: 271px;
  position: relative; 
  width: 600px;
  z-index: 125;
}



.weel{

  animation: wheel 0.7s infinite linear;
  background: url('https://i.stack.imgur.com/0Osjx.png') 0 0;
  height: 85px;
  position: absolute;
  top: 67%;
  width: 85px;
  z-index: 200;
}
.weel1{left: 85px;}
.weel2{left: 454px;}

/*animations*/
@keyframes carmove{
  0%{transform: translateY(0px);}
  25%{transform: translateY(1px)}
  29%{transform: translateY(2px)}
  33%{transform: translateY(3px)}
  47%{transform: translateY(0px)}
  58%{transform: translateY(1px)}
  62%{transform: translateY(2px)}
  66%{transform: translateY(3px)}
  75%{transform: translateY(1px)}
  100%{transform: translateY(0px)}
}




body {
  -webkit-animation: color-fade 10s infinite;
  -moz-animation: color-fade 10s infinite;
  animation: color-fade 10s infinite;
}

@-webkit-keyframes color-fade {
  0% { background: #9a5342; }
  25% { background: #fffc0c; }
  50% { background: #e46d00; }
  75% { background: #ff3506; }
  100% { background: #9a5342; }
}


.stopedWeel{
     animation: stableWheel .2s linear infinite alternate;
  
}
<div class="car">
  <div class="carbody"></div>
  <div class="weel weel1"></div>
  <div class="weel weel2"></div>
</div>

车轮动画是这样的：

@keyframes wheel{
     0%{
       transform: rotate(0deg)
      }

        35% {
        transform: rotate(-90deg)
      }
      36%,
      56% {
        transform: rotate(-180deg)
      }

     100%{
       transform: rotate(-359deg)
      }
    }

如果您运行我的代码，则车轮都抖动不清。

有人可以对此提出建议吗？

3 个答案:

答案 0 :(得分：12)

为简化操作，请对两个动画使用相同的持续时间，然后增加旋转角度以控制滚轮。只需确保您在{em>结束时返回Moment('12:16','HH:mm').get('minutes') //should result in '16' （在这种情况下就不是强制性的，因为汽车运动没有周期）

我还优化了您的代码以使用百分比值，因此您只需调整主要元素的宽度即可轻松控制整辆车：

n*360deg
.car{
  margin: 0 auto;
  position: relative;
  width: 400px;
  animation: moving 10s linear -2s infinite;
}
.car:before {
  content:"";
  display:block;
  animation: carmove 3.1s infinite linear;
  background: url('https://i.stack.imgur.com/xWNOG.png') center/cover;
  padding-top:45.25%;
}

.weel{
  animation: wheel 10s infinite -2s linear;
  background: url('https://i.stack.imgur.com/0Osjx.png') center/cover;
  position: absolute;
  bottom:0.8%;
  width: 14.15%;
}
.weel:before {
   content:"";
   display:block;
   padding-top:100%;
}
.weel1{left: 14.5%;}
.weel2{right: 10%;}

/*animations*/
@keyframes carmove{
  0%{transform: translateY(0px);}
  25%{transform: translateY(1px)}
  29%{transform: translateY(2px)}
  33%{transform: translateY(3px)}
  47%{transform: translateY(0px)}
  58%{transform: translateY(1px)}
  62%{transform: translateY(2px)}
  66%{transform: translateY(3px)}
  75%{transform: translateY(1px)}
  100%{transform: translateY(0px)}
}

@keyframes wheel{
 0%{
   transform: rotate(0deg)
  }
  35% {
    transform: rotate(-920deg)
  }
  36%,
  56% {
    transform: rotate(-920deg)
  }
 100%{
   transform: rotate(-1440deg)
  }
}

@keyframes moving {
  0% {
    right: -80em;
    animation-timing-function: ease-out;
  }
  35% {
    right: 0;
  }
  36%,
  56% {
    right: 0;
    animation-timing-function: ease-in;
  }
  100% {
    right: 120%;
  }
}

body {
  overflow:hidden;
}

还有一辆小汽车：

<div class="car">
  <div class="weel weel1"></div>
  <div class="weel weel2"></div>
</div>
.car{
  margin: 0 auto;
  position: relative;
  width: 150px;
  animation: moving 10s linear -2s infinite;
}
.car:before {
  content:"";
  display:block;
  animation: carmove 3.1s infinite linear;
  background: url('https://i.stack.imgur.com/xWNOG.png') center/cover;
  padding-top:45.25%;
}

.weel{
  animation: wheel 10s infinite -2s linear;
  background: url('https://i.stack.imgur.com/0Osjx.png') center/cover;
  position: absolute;
  bottom:0.8%;
  width: 14.15%;
}
.weel:before {
   content:"";
   display:block;
   padding-top:100%;
}
.weel1{left: 14.5%;}
.weel2{right: 10%;}

/*animations*/
@keyframes carmove{
  0%{transform: translateY(0px);}
  25%{transform: translateY(1px)}
  29%{transform: translateY(2px)}
  33%{transform: translateY(3px)}
  47%{transform: translateY(0px)}
  58%{transform: translateY(1px)}
  62%{transform: translateY(2px)}
  66%{transform: translateY(3px)}
  75%{transform: translateY(1px)}
  100%{transform: translateY(0px)}
}

@keyframes wheel{
 0%{
   transform: rotate(0deg)
  }
  35% {
    transform: rotate(-920deg)
  }
  36%,
  56% {
    transform: rotate(-920deg)
  }
 100%{
   transform: rotate(-1440deg)
  }
}

@keyframes moving {
  0% {
    right: -80em;
    animation-timing-function: ease-out;
  }
  35% {
    right: 0;
  }
  36%,
  56% {
    right: 0;
    animation-timing-function: ease-in;
  }
  100% {
    right: 120%;
  }
}

body {
  overflow:hidden;
}

答案 1 :(得分：4)

SVG动画

场景

  1. 汽车出现在右侧。
    车轮旋转

  2. 汽车停在路中间。
    车轮不旋转

  3. 汽车又骑了。
    车轮旋转

  4. 重复整个周期

为什么我要编写这种原始算法？仅为了清楚地按照启动并行和顺序动画的顺序进行操作。

与SVG中的CSS动画不同，您可以轻松进行计时计算。 就像在场景中所写的那样，并实现开始，停止动画

例如：

  • 第一回合运动结束后会出现一个暂停

begin="an_move1.end"

  • 路径的第二部分将在暂停后开始移动

begin="an_pause.end"

有关更多说明，请参见代码注释。 

body {
  -webkit-animation: color-fade 10s infinite;
  -moz-animation: color-fade 10s infinite;
  animation: color-fade 10s infinite;
}

@-webkit-keyframes color-fade {
  0% { background: #9a5342; }
  25% { background: #fffc0c; }
  50% { background: #e46d00; }
  75% { background: #ff3506; }
  100% { background: #9a5342; }
}

.container {
width:100%;
height:100%;
}
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
       width="1200" height="600" viewBox="0 0 600 800" preserveAspectRatio="xMinYMin meet">  
  <!-- Car -->
<g id="car" transform="translate(-2400,0)">
<image xlink:href="https://i.stack.imgur.com/xWNOG.png" width="100%" height="100%" />

 <g id="wheel_left" transform=" translate(85,430) scale(0.145)" >
   <image xlink:href="https://i.stack.imgur.com/0Osjx.png" width="100%" height="100%" >
     <!-- Left wheel rotation animation -->
 <animateTransform
     id="an_left"
	 attributeName="transform"
	 type="rotate"
	 begin="0s;6s;16s;26s;36s;46s;56s"
	 end="an_pause.begin"
	 values="
	 0 300 400;
	-360 300 400"
	 dur="1s"
	 repeatCount="indefinite"
 />
 </image>
 </g>  
     
 <g id="wheel_right" transform=" translate(455,430) scale(0.145)" >
 <image xlink:href="https://i.stack.imgur.com/0Osjx.png" width="100%" height="100%" > 
     <!-- Right wheel rotation animation -->
    <animateTransform
	  id="an_right"
	  attributeName="transform"
	  type="rotate"
	  begin="0s;6s;16s;26s;36s;46s;56s;66s;76s"
	  end="an_pause.begin"
	  values="
	   0 300 400;
	-360 300 400"
	  dur="1s"
	  repeatCount="indefinite"
	/>
 </image>
 </g>
</g>   
<!-- Animation of a car moving to a stop -->
 <animateTransform
   id="an_move1"
   xlink:href="#car"
   attributeName="transform"
   type="translate"
   begin="0s;an_move2.end"
   values="2400;800"
   dur="4s"
   fill="freeze"
   repeatCount="1"
 />  
 <!-- Car  move  pause  -->
 <animateTransform
   id="an_pause"
   xlink:href="#car"
   attributeName="transform"
   type="translate"
   begin="an_move1.end"
   values="800"
   dur="2s"
   fill="freeze"
   repeatCount="1"
 /> 
 <!-- Animation of a car moving after a stop -->
  <animateTransform
   id="an_move2"
   xlink:href="#car"
   attributeName="transform"
   type="translate"
   begin="an_pause.end"
   values="800;-600"
   dur="4s"
   fill="freeze"
   repeatCount="1"
 /> 

</svg>	 
</div>

答案 2 :(得分：1)

在视图屏幕的中间，汽车和车轮动画都应停止几秒钟。因此，车轮动画应与汽车动画相同。 

.car{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  width: 600px;
  height:271px;
  overflow:hidden;
  animation: moving 10s linear -2s infinite;
}

更新后的车轮样式应如下所示。

.weel{
  /*animation: wheel 0.7s infinite linear;*/
  animation: wheel 10s linear -2s infinite;

  background: url('https://i.stack.imgur.com/0Osjx.png') 0 0;
  height: 85px;
  position: absolute;
  top: 67%;
  width: 85px;
  z-index: 200;
}

如果现在运行代码，则可以同时看到车轮和汽车动画。但是，您会发现汽车速度和车轮速度之间存在差异，应该停止车轮直到车身再次移动为止。要解决速度和方向盘问题，您需要增加关键帧值，同时使中间的两个关键帧值保持相等。 

@keyframes wheel{
0%{
   transform: rotate(0deg)
  }

    35% {
    transform: rotate(-500deg)
  }
  36%,
  56% {
    transform: rotate(-500deg)
  }

 100%{
   transform: rotate(-1000deg)
  }
}

此Js Fiddle link显示了实时动画。

相关问题
最新问题