@keyframes标准完成多种情况的CSS动漫

2021-01-20 07:18 jianzhan

界定和用法
根据 @keyframes 标准，您可以建立动漫。
建立动漫的基本原理是，将1套 CSS 款式慢慢转变为另外一套款式。
在动漫全过程中，您可以数次更改这套 CSS 款式。
以百分比来要求更改产生的時间，或根据重要词 "from" 和 "to"，等额的于 0% 和 100%。
0% 是动漫的刚开始時间，100% 动漫的完毕時间。
以便得到最好的访问器适用，您应当自始至终界定 0% 和 100% 挑选器。
注解：请应用动漫特性来操纵动漫的外型，另外将动漫与挑选器关联。


英语的语法

CSS Code拷贝內容到剪贴板
  1. @keyframes animationname {keyframes-selector {css-styles;}}  


多种情况动漫

CSS情况动漫在很长期内1直是1个热门话题，关键由于不必须附加的元素，看起来实际效果也非常好。假如是有多种情况的CSS动漫呢，下面大家看来下是怎样完成的。
先上个实际效果图：

CSS编码
 

CSS Code拷贝內容到剪贴板
  1. @keyframes animatedBird {   
  2.     from {   
  3.         background-position: 20px 20px, 30px 80px, 0 0;   
  4.     }   
  5.     to {   
  6.         background-position: 300px -90px, 30px 20px, 100% 0;   
  7.     }   
  8. }   
  9. @-webkit-keyframes animatedBird {   
  10.     from {   
  11.         background-position: 20px 20px, 30px 80px, 0 0;   
  12.     }   
  13.     to {   
  14.         background-position: 300px -90px, 30px 20px, 100% 0;   
  15.     }   
  16. }   
  17. @-ms-keyframes animatedBird {   
  18.     from {   
  19.         background-position: 20px 20px, 30px 80px, 0 0;   
  20.     }   
  21.     to {   
  22.         background-position: 300px -90px, 30px 20px, 100% 0;   
  23.     }   
  24. }   
  25. @-moz-keyframes animatedBird {   
  26.     from {   
  27.         background-position: 20px -90px, 30px 80px, 0 0;   
  28.     }   
  29.     to {   
  30.         background-position: 300px -90px, 30px 20px, 100% 0;   
  31.     }   
  32. }   
  33. .animate-area2 {   
  34.     width: 560px;   
  35.     height: 190px;   
  36.     background-image: url(twitter-logo-bird.png), url(treehouseFrog.png), url(bg-clouds.png);   
  37.     background-position: 20px -90px, 30px 80px, 0px 0px;   
  38.     background-repeat: no-repeat, no-repeat, repeat-x;   
  39.     animation: animatedBird 4s linear infinite;   
  40.     -ms-animation: animatedBird 4s linear infinite;   
  41.     -moz-animation: animatedBird 4s linear infinite;   
  42.     -webkit-animation: animatedBird 4s linear infinite;   
  43.     overflow: hidden;   
  44. }  

HTML编码

XML/HTML Code拷贝內容到剪贴板
  1. <div class="animate-area2"></div>  

demo演试详细地址:http://www.zjgsq.com/example?pid=1198

为您推荐