0
我想创建一个带有子画面的小动画,并且希望找到最合适的工具/库。基本上我想知道什么是相当于keyframes非本地反应。React sprite动画
我试过创建GIF,但透明度有很多文物。我可以使用像phaser/pixi.js这样的东西,但对于只是一个简单的动画的东西来说似乎有点矫枉过正。
我想创建一个带有子画面的小动画,并且希望找到最合适的工具/库。基本上我想知道什么是相当于keyframes非本地反应。React sprite动画
我试过创建GIF,但透明度有很多文物。我可以使用像phaser/pixi.js这样的东西,但对于只是一个简单的动画的东西来说似乎有点矫枉过正。
有一些简单的方法:
CSS动画(或等效使用JS):
{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
background-position: 0 0;
cursor: pointer;
animation: fave-heart 1s steps(28);
}
.heart:hover {
background-position: -2800px 0;
transition: background 1s steps(28);
}
@keyframes fave-heart {
0% {
background-position: 0 0;
}
100% {
background-position: -2800px 0;
}
}
http://codepen.io/mindstorm/pen/aZZvKq
阵营-spriteseet: https://github.com/frostney/react-spritesheet