CSS3多个背景图像在移动时淡入和淡出
[英]css3 multiple background images fade in and out while moving
问题描述
I have a map on a page where I have an image that I can move from X to Y as a still png image. 
我在页面上有一张地图，其中有一张可以从X移到Y的图像，仍然是png图像。
I would like to change this to having the still image become an animated image and then return to a still image. 我想将其更改为让静止图像变成动画图像，然后返回到静止图像。
This is what I have now in my CSS file and in my PHP file. 这就是我现在在CSS文件和PHP文件中所拥有的。 How can I change the CSS or PHP file so that I don't see all the images? 如何更改CSS或PHP文件，以便看不到所有图像？ I want to create a 'walking' motion (maybe by showing one image after the other? then hiding the prior shown image?) 我想创建一个“行走”运动（也许是通过一个显示另一个图像吗？然后隐藏先前显示的图像吗？）
div.animate-stills { width: 13px; height: 30px; position: absolute; -webkit-animation: mymove 5s 1; animation: mymove 5s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }
<head> <link rel="stylesheet" href="vault/style_animate.css"> <?php /* my php here */ ?> <style> /* ANY DIRECTION */ @-webkit-keyframes mymove { from {top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;} to {top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;} } @keyframes mymove { from{top: <?php echo "$playerlocation_y"; ?>px; left: <?php echo "$playerlocation_x"; ?>px;} to{top: <?php echo "$move_y"; ?>px; left: <?php echo "$move_x"; ?>px;} } </style> </head> <body> <?php /* my php here */ echo '<div class="animate-stills" syle="position: absolute; top: ' . $playerlocation_y . 'px; left: ' . $playerlocation_x . 'px; background-image: url(' . $img_1 . '),url(' . $img_2 . '),url(' . $img_3 . '),url(' . $img_4 . '),url(' . $img_5 . '),url(' . $img_6 . '),url(' . $img_7 . '),url(' . $img_8 . '); background-size: contain; background-position: center center; width: 13px; height: 30px;"></div>'; ?> </body>
I have simplified the php so you can make some sense of it. 我已经简化了php，因此您可以理解一下。 all the $variables are declared and or taken from the database. 所有$ variables都从数据库中声明和/或获取。
HTML outputs the following: HTML输出以下内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>SKULLS AND BONES</title> <link rel="stylesheet" href="vault/style.css"> <link rel="stylesheet" href="vault/style_animate.css"> <link rel="stylesheet" href="vault/style_hex50.css"> <link rel="icon" href="favicon.ico" /> <!-- <script src="script.js"></script> --> <style> /* ANY DIRECTION */ /* Chrome,Safari,Opera */ @-webkit-keyframes mymove { from {top: 86px; left: 232px;} to {top: 86px; left: 284px;} } /* Default syntax */ @keyframes mymove { from {top: 86px; left: 232px;} to {top: 86px; left: 284px;} } </style> </head> <body> <div class="animate-stills" style="position: absolute; top: 86px; left: 232px; background-image: url(vault/images/alpha/player_male_1.png), url(vault/images/alpha/test_male02.png), url(vault/images/alpha/test_male03.png), url(vault/images/alpha/test_male04.png), url(vault/images/alpha/test_male05.png), url(vault/images/alpha/test_male06.png), url(vault/images/alpha/test_male07.png), url(vault/images/alpha/test_male08.png); background-size: contain; background-position: center center; width: 32px; height: 32px;"></div> </body> </html>
I have shortened the output for better reading. 我已缩短输出以更好地阅读。
1 个解决方案
解决方案1
0 2016-07-02 15:51:33
After a long time of fiddling arround and searching google more on the subject I found some solution. 经过很长时间的摆弄和搜索google之后，我找到了一些解决方案。 I had to make a few changes. 我必须进行一些更改。 Here is the CSS file. 这是CSS文件。
div.animate-movement { background: url(images/alpha/MaleWalkingSheet128x30.png); width: 16px; height: 30px; transform: translate3d(0,0,0); -webkit-animation: mymove 2.1s steps(8) 3; animation: mymove 2.1s steps(8) 3; }
And here is some of the output from the php in the html file. 这是html文件中php的一些输出。 I have placed this in the php file because the values are always changing. 我将其放置在php文件中，因为值始终在变化。
/* ANY DIRECTION */ /* Chrome,Safari,Opera */ @-webkit-keyframes mymove { from {top: 209px; left: 206px;} to {top: 250px; left: 232px;} from {background-position: 0px; } to {background-position: -128px; } } /* Default syntax */ @keyframes mymove { from {top: 209px; left: 206px;} to {top: 250px; left: 232px;} from {background-position: 0px; } to {background-position: -128px; } } <div class="animate-movement"></div>
The only problem I now seem to have with this is that it sometimes looks like the image is 'warping' backward to where it was before ending the animation. 我现在似乎对此唯一的问题是，有时看起来图像在结束动画之前向后“弯曲”到原来的位置。 I searched google for this and therefore I added: transform: translate3d(0,0,0); 我在Google上搜索了此内容，因此添加： to the css file. 到css文件。 apparantly that turns the animation over to the GPU? 显然将动画移交给了GPU？ The animation sometimes 'warps' any way to fix this? 动画有时会“扭曲”任何方式来解决此问题？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.