为了用我的动画技能吓唬Pixar的家伙们,我正在尝试使用CSS实现行走效果...
不幸的是,我无法同时使用两种不同的动画效果,我希望
这是我目前的尝试:
这是一个例子 JsFiddle
不幸的是,我无法同时使用两种不同的动画效果,我希望
steps
以可变速率旋转到walkRight
过渡中。这是我目前的尝试:
CSS
.wrapper {
position: absolute;
width: 100px;
height: 100px;
right: 0;
animation-name: walkRight;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 10s;
}
.hulk {
-webkit-animation: steps 10s linear 0s;
}
@keyframes walkRight {
0% {
transform: translateX(-400px);
}
100% {
transform: translateX(0);
}
}
@-webkit-keyframes steps {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(20deg);
}
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(-20deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
这是一个例子 JsFiddle
steps
移动得更快,独立于transitionX。 - Matt D. Webb