管窥CSS3动画的实现原理

红影

1. <style type="text/css">
   
2. 
   
3. @keyframes iChange {
   
4.     0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
   
5. } 50% { width:136px; height:225px;top:70px; left:380px; }
   
6. }75% { width:218px; height:359px;top:18px; left:240px; }
   
7. }100% { width:136px; height:225px;top:70px; left:100px; }
   
8. }
   
9. 
   
10. @-moz-keyframes iChange {
    
11.     0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
    
12. } 50% { width:136px; height:225px;top:70px; left:380px; }
    
13. }75% { width:218px; height:359px;top:18px; left:240px; }
    
14. }100% { width:136px; height:225px;top:70px; left:100px; }
    
15. }
    
16. 
    
17. @-webkit-keyframes iChange {
    
18.     0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
    
19. } 50% { width:136px; height:225px;top:70px; left:380px; }
    
20. }75% { width:218px; height:359px;top:18px; left:240px; }
    
21. }100% { width:136px; height:225px;top:70px; left:100px; }
    
22. }
    
23. 
    
24. @-o-keyframes iChange {
    
25.     0% { width: 136px; height:225px;top:70px; left:100px; } 25% { width:218px; height:359px;top:18px; left:240px; }
    
26. } 50% { width:136px; height:225px;top:70px; left:380px; }
    
27. }75% { width:218px; height:359px;top:18px; left:240px; }
    
28. }100% { width:136px; height:225px;top:70px; left:100px; }
    
29. }
    
30. 
    
31. .s2b {position:relative;
    
32.     animation: iChange 5s infinite alternate;
    
33.     -moz-animation: iChange 5s infinite alternate;        /* Firefox */
    
34.     -webkit-animation: iChange 5s infinite alternate;        /* Safari 和 Chrome */
    
35.     -o-animation: iChange 5s infinite alternate;        /* Opera */
    
36.     width:136px;
    
37.     height:225px;
    
38. }
    
39. 
    
40. </style>
    
41. <div style="height:500px;">
    
42. 
    
43. 
    
44. <img class="s2b" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="再玩个" />
    
45. 
    
46. </div>

复制代码

红影

理想很丰满，现实很骨感我感觉应该是按部就班进行的，显示出来的确不是。

马黑黑

红影 发表于 2021-12-25 17:09
理想很丰满，现实很骨感我感觉应该是按部就班进行的，显示出来的确不是。

创意的实现需要坚实的基础

红影

马黑黑 发表于 2021-12-25 17:00
应用的时候，过去学会的方法要带上

我只是看一个，就只会看到的这个

红影

我39楼做新的试验，结果29楼貌似也影响到了？

红影

先吃饭去，吃饱了再来折腾

马黑黑

红影 发表于 2021-12-25 17:31
先吃饭去，吃饱了再来折腾

看样子玩开心了

东篱闲人

马黑黑 发表于 2021-12-25 11:35
@东篱闲人 二楼征用你的茶几

这科学家整这玩意，太深奥了，迷糊。茶几随便用，俺再给你添点新茶。。。。

马黑黑

红影 发表于 2021-12-25 17:26
我只是看一个，就只会看到的这个

多核大脑还是要锻造的

马黑黑

东篱闲人 发表于 2021-12-25 18:15
这科学家整这玩意，太深奥了，迷糊。茶几随便用，俺再给你添点新茶。。。。

那就谢谢了

红影

红影

马黑黑 发表于 2021-12-25 18:16
多核大脑还是要锻造的

这下子彻底不动了，你看上面这个，前面还乱跑呢，现在不会动了

东篱闲人

马黑黑 发表于 2021-12-25 18:17
那就谢谢了

不客气，随便喝哈。。。。

                               
登录/注册后可看大图

马黑黑

红影 发表于 2021-12-25 17:09
理想很丰满，现实很骨感我感觉应该是按部就班进行的，显示出来的确不是。

代码中有多余的大括号。另，先不考虑兼容旧版浏览器，做好主要的就行：

1. @keyframes iChange {
   
2.         0% { width: 136px; height:225px;top:70px; left:100px; }
   
3.         25% { width:218px; height:359px;top:18px; left:240px; }
   
4.         50% { width:136px; height:225px;top:70px; left:380px; }
   
5.         75% { width:218px; height:359px;top:18px; left:240px; }
   
6.         100% { width:136px; height:225px;top:70px; left:100px; }
   
7. }
   
8. 
   
9. .s2b {position:relative;
   
10.     animation: iChange 5s infinite alternate;
    
11.     width:136px;
    
12.     height:225px;
    
13. }
    
14. 
    
15. </style>
    
16. <div style="height:500px;">
    
17.         <img class="s2b" src="https://www.huachaowang.com/data/attachment/forum/201711/19/142453t7u7xx5hz85lpdud.jpg" alt="再玩个" />
    
18. </div>

复制代码

马黑黑

东篱闲人 发表于 2021-12-25 18:29
不客气，随便喝哈。。。。

还是茶青呢

马黑黑

红影 发表于 2021-12-25 18:26
这下子彻底不动了，你看上面这个，前面还乱跑呢，现在不会动了

你去看看我修正的代码

红影

嗯嗯，现在可以了。原来多复制了半边的大括号

红影

马黑黑 发表于 2021-12-25 18:35
你去看看我修正的代码

这个好像变快了，我把时间都加大到24秒了，还是觉得比前面的5秒还快。

马黑黑

红影 发表于 2021-12-25 19:08
这个好像变快了，我把时间都加大到24秒了，还是觉得比前面的5秒还快。

不会是喝醉了吧？我在本地测试没问题的

红影

马黑黑 发表于 2021-12-25 19:28
不会是喝醉了吧？我在本地测试没问题的

是不是时间值越大应该动得越慢的？