html - How to animate a car's wheels based on a moving and stopping car using CSS?
问题描述
I'm trying to animate a car using CSS. I've managed to animate the wheels and the car.
The car moves in and stops and then moves off. this animation loops.
Now, I need to stop the wheels as well when then car stops. But I can't seem to achieve that.
This is what I have so far:
@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>
The wheels animation is this:
@keyframes wheel{
0%{
transform: rotate(0deg)
}
35% {
transform: rotate(-90deg)
}
36%,
56% {
transform: rotate(-180deg)
}
100%{
transform: rotate(-359deg)
}
}
if you run my code, the wheels are all jittery and lagging.
Could someone please advice on this?
解决方案
为了使它更容易,对两个动画使用相同的持续时间,然后增加旋转角度来控制轮子。只需确保您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;
}
<div class="car">
<div class="weel weel1"></div>
<div class="weel weel2"></div>
</div>
推荐阅读
- dart - 如何在 Flutter 的 SliverAppBar 中添加 Tabbar?
- javascript - FormData 对象仅获取文件输入,而不是其他输入,例如文本
- tensorflow - 使用 Estimator API 生成文本
- php - SQL:如何插入自定义增量值
- dart - 链接到 Dart 注释中的类以获取文档
- asp.net-core - WebRootPath 和 TestServer
- java - 动态创建的edittext的值没有被存储
- go - 使用 Go 接收和发送 TCP 客户端
- android - 在android中改造没有json数组名称的响应对象
- java - Fragment替换期间的Nullpointerexception